jquery - How to make a CSS mega menu be on the full width of the page? (998px, but in the middle?)

Question

Hello dear internet fellows,

I am trying to build a megamenu, because I think the normal

-Lists are outdated.

So far I am doing well, because I found some good tutorials on the www. Non the less, I want my megamenu to be always positioned under the main menu. The main menu has a width of 998px and so should the megamenu be. When I give it the same width, the width is applied, but I get the problem, that the megamenu starts at the point, where the

-Element is hovered. But I want it to start always at the left side of the main menu.

I tried to give it an absolute position, but it still wont work how I want it to. I hope I made the problem clear. I would be very glad if someone could give me a hint.

 #menu li:hover .dropdown_1column, 
 #menu li:hover .dropdown_2columns, 
 #menu li:hover .dropdown_3columns,
 #menu li:hover .dropdown_4columns,
 #menu li:hover .dropdown_5columns 
         position: absolute;
         left:-1px;
         top:auto;
         right: auto;
         bottom: auto;
         float: left;
 }

JSFiddle

Answer 1

You need to remove 'position: relative;' from the following:

#menu li {
float: left;
display: block;
text-align: center;
position: relative; /* <<<<<<<<<<<<< Remove this */
border-right: 1px #000db9 solid;
padding: 7px 10px 3px 10px;
}

Then you need to remove or change the individual widths you have on some columns (dropdowns).

Example:

.dropdown_3columns {
width: 420px;
}

See http://jsfiddle.net/4paqY/1/

Answer 2

Alex is correct. An element that has absolute positioning will align itself according to the closest parent with a relative position.

Therefore, removing relative positioning from #menu li allows the child container to position itself against the next relative parent, #menu.

I would, however, take it a step further by using the direct child selector to keep child list items from being affected: #menu > li