CSS Drop down flyout menu to fly-out over the main content of the page

[ncimiluca 0]

Hello all and thanks in advance for thinking about this. I'm trying to flyout my sub-menu's over the main content of the page - but the fly-outs actually fly-under the main content. I've tried z-indexing up the wazoo but can't figure it out. Any help is appreciated. Here's the page: www.bethsfaceandbodyplace.com Currently the vertical menu is the custom menu widget inside the primary sidebar with the following CSS: /*SIDEBAR MENU */ #sidebar1{position:absolute; z-index:999999 !important;} #menu-nav.menu { font-size:22px; text-align:right; position:relative; right:70px; width:240px; } #menu-nav.menu a:hover{color:#111} #menu-nav.menu li { min-height:25px; padding-bottom:5px; -webkit-transition: background-color .4s, max-height:.4s; -moz-transition: background-color .4s; -o-transition: background-color .4s ; transition: background-color .4s ; } #menu-nav.menu li:hover { margin-bottom: auto; background-color:rgba(0,150,255,.5); -moz-border-radius: 8px; -webkit-border-radius: 8px; } #menu-nav.menu .sub-menu { display:block; position:absolute; left:-999px; font-size:16px; -webkit-transition:left .3s; -moz-transition:left .3s; -o-transition:left .3s; transition:left .3s; } #menu-nav.menu li:hover .sub-menu { position:absolute; height:22px; left:200px; margin-top:3px; padding:0px 0 3px 0; z-index:999999 !important; } #menu-nav.menu .sub-menu li:hover{ background-color:transparent; -moz-border-radius: 8px; -webkit-border-radius: 8px; }

[kastelic 6]

Seems you have it position:fixed? I'm not sure where the content is going under the other content.

[ncimiluca 0]

yeah - I fixed the position so it doesn't scroll when there is a long page. It was hiding underneath the main content before the fixed position.

[ncimiluca 0]

got it - just had to dig deeper in the css with firebug. It was a width issue - not a z-index issue