css - Percentage width mega menu plus standard drop down on the one html list -

long time reader via google searches, first time poster.

i trying implement percentage width mega menu plus standard pixel width drop down menu on 1 html list.

(i want mega menu width percentage based work in responsive layouts , happy works.)

i can't seem them work together. here fiddle: http://jsfiddle.net/eavjt/

if set position static on top level li link in example 1 in fiddle, mega menu works fine, standard drop down breaks (its not vertical).

#menu li { float: left; list-style: none; margin: 0; padding: 0; position: static; } 

if set position relative on top level li link in example 2 in fiddle, standard drop down works fine (its vertical expected), mega menu breaks (it gets squished width of top level parent link).

#menu li { float: left; list-style: none; margin: 0; padding: 0; position: relative; } 

i tried changing static , relative top level links using different classes not seem viable height of mega menu added bottom of page.

i totally stumped.

any ideas?

i haven't been able find solution , hope can help.

many thanks.

the full css #menu follows:

/*wrapper*/ #menu { width: auto; height: auto; margin: 0; text-align: left; position: relative; display: block; z-index: 6; clear: both; }  /*top level*/ #menu ul { margin: 0; padding: 0; } #menu li { float: left; list-style: none; margin: 0; padding: 0; position: static; background: #ccc; } #menu li { display: block; position: relative; padding: 0 10px 0 10px; } #menu li, #menu li { height: 50px; } #menu li span { line-height: 50px; }  /*std drop down*/ #menu li ul { margin: 0; left: -999em; opacity: 0; visibility: hidden; overflow: hidden; position: absolute; z-index: 20; } #menu li:hover ul { left: 0; opacity: 1; visibility: visible; overflow: visible; } #menu li li { float: left; width: 200px; position: relative; display: block; background: #999; } #menu li li, #menu li li { height: auto; } #menu li li { display: block; padding: 8px 10px; }  /*mega drop down*/ #menu li .drop { width: 100%; left: -999em; opacity: 0; visibility: hidden; overflow: hidden; position: absolute; z-index: 20; background: #333; } #menu li:hover .drop { left: 0; opacity: 1; visibility: visible; overflow: visible; } #menu li .drop ul { margin: 0; padding: 0; position: relative; } #menu li .drop li { float: none; width: auto; margin: 0; padding: 0; position: relative; background: #666; } #menu li .drop p a, #menu li .drop li { position: relative; display: block; } /*columns*/ #menu .drop .col { width: 23%; height: auto; margin: 15px 1.5% 0 0; float: left; display: block; position: relative; } #menu .drop .col.first { margin-left: 1.5%; } #menu .drop .col.last { width: 23.5%; margin-right: 0; } /*links*/ #menu .drop p { padding: 0; } #menu .drop p { padding: 5px 0 8px 0; } #menu .drop li a, #menu .drop li.last { padding: 5px 0; }  /*text*/ #menu li span, #menu li li a, #menu .drop p a, #menu .drop li { color: #fff; font-size: 1.5em; text-decoration: none; } 

the easiest solution can think of change mega dropdown's position fixed. in doing so, no longer absolutely positioned relative parent's confined width.

updated example

#menu li .drop {     width: 100%;     left: -999em;     opacity: 0;     visibility: hidden;     overflow: hidden;     position: fixed;   /* changed.. */     z-index: 20;     background: #333; } 

if above solution problematic, alternative remove left positioning , remove floats nested li elements. in doing so, don't have relatively position parent ul elements.

updated example

remove following:

#menu li .drop { left: -999em; }  #menu li:hover ul { left: 0; } 

add following:

#menu > ul > li > ul > li { float: none; }