pure css navigation menu help

[ottomated]

hello,

I have been working on this website for a while now. I am slowly getting accustomed to css and javascript. Anyhow I cannot solve this problem and it has been bothering me so I am here to get your help.

I have a pure css navigation menu on top of my website and everything works fine. however the parent menu and the submenus are not lined up correctly. Right now I am faking it with an absolute definition of where my submenu should be. Ideally, I want my submenu and my parent menu to be lined up in their centerline.



#navigation li ul {
margin:8px;
padding:0px;
display:none;
position:absolute;
left: -20px;
top:17px;
line-height:30px;
font-size:13px;
}

the problem is, when ever I try messing with the style setup, the menu stops working. so I have no clue how to do it. I wanted to know if anybody on this forum knew how to line the parent menu and the submenu by their centerline. the website is this:


WEBSITE (http://student.seas.gwu.edu/~ottobahn/test.html)



any input is appreciated.

[Wickham]

This is better:-


#navigation li ul
{margin:8px; padding:0px; display:none; position:absolute; /*left:
-120px;*/ top:17px; line-height:30px; font-size:13px; }

#navigation li:hover ul
{display:inline; width:350px;/*500px;*/ background: skyblue; margin-left:
-100px; }


I edited the width to 350px because it was going beyond the right side and causing scrollbars.

There is still a slight difference between the left alignment of the top level and the first drop down level because the width of text is different and so the starting position is slightly different. If you added widths to the top an dropdown li tags it might help, but then the total width might be too great in the drop down level creating scrollbars.