Can you help me with this layout...?

Hi, I am new to CSS and I am trying to build the layout attached. (See reference.jpg)

Now if you see the layout you will see that I will need 4 sets of links that appear one next to the other. I have built 2 sets so far and put each of the navigation sets in a separate div (#nav1,#nav2...) all grouped under a main div called #nav_all. I am trying to position the second set of links (#nav2) using the absolute positioning ( while keeping the #nav_all as relative). But whatever I do, I can't get it to position correctly.The second set just appears on top of the first set in all browsers (IE,FF & O). Funny thing is it appears perfectly placed in Dreamweaver. Can you please see my code(http://www.desktopdeck.com/mockup.zip) and tell me what I could be doing wrong and suggest any means to get the 4 sets of links arranged as I have shown in the mock-up..?

Thanks.

 

Make one <div> (relative or absolute) and make four <ul>'s in it (display: block; float: left)

<div id="navigation">
     <ul id="whatever">
          <li>Menu items</li>
    </ul>
     <ul id="whatever">
          <li>Menu items</li>
    </ul>
</div>

Code (markup):

If you have more questions, I'll be glad to help.