This is better:-
Code:
#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.
Code downloaded to my PC will be deleted in due course.
WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.