I've got a drop down nav bar within the header of my page.

My main content div covers up the drop down items within IE (7 and older); however, Firefox seems to be fine.

Any ideas??

show me the code first

Main CSS

Code:

#horizontal_menu { width: 100%; background: #f8f8f8; float: right; } #horizontal_menu ul { list-style: none; margin: 0; padding: 0; width: 10em; float: right; } #horizontal_menu a, #horizontal_menu h2 { font: 10px Verdana, Arial, Helvetica, sans-serif; display: block; margin: 0; } #horizontal_menu h2 { text-align: center; text-transform: uppercase; } #horizontal_menu a { color: #0A0F25; background: #efefef; text-decoration: none; border-style: solid; border-color: #ccc #888 #555 #bbb; border-bottom: solid 1px #162469; padding: 2px 3px; } #horizontal_menu a:hover { color: #e7e7e7; background-color: #162469; } #horizontal_menu li { position: relative; } #horizontal_menu ul ul ul { position: absolute; top: 0; left: 100%; } #horizontal_menu ul ul { position: absolute; z-index: 500; } div#horizontal_menu ul ul { display: none; } div#horizontal_menu ul li:hover ul { display: block; } div#horizontal_menu ul ul, div#horizontal_menu ul li:hover ul ul, div#horizontal_menu ul ul li:hover ul ul { display: none; } div#horizontal_menu ul li:hover ul, div#horizontal_menu ul ul li:hover ul, div#horizontal_menu ul ul ul li:hover ul { display: block; }

Within my index.php file

Code:

<!--[if IE]> <style type="text/css" media="screen"> #vertical_menu ul li {float: left; width: 100%;} #horizontal_menu ul li {float: left; width: 100%;} </style> <![endif]--> <!--[if lt IE 7]> <style type="text/css" media="screen"> body { behavior: url(includes/csshover.htc); font-size: 100%; } #vertical_menu ul li {float: left; width: 100%;} #vertical_menu ul li a {height: 1%;} #horizontal_menu ul li {float: left; width: 100%;} #horizontal_menu ul li a {height: 1%;} #vertical_menu a, #vertical_menu h2 { font: 10px arial, helvetica, sans-serif; } #horizontal_menu a, #horizontal_menu h2 { font: 10px arial, helvetica, sans-serif; } </style> <![endif]-->

The problem is with the horizontal menu....vertical doesn't have any pop-outs or the likes. Thx,

I can't tell without seeing your whole page and structure but ensure the header and the nav have a higher z-index than the content that covers it.

Only positioned elements can have a z-index applied so you will need to add position:relative to static elements to enable their z-index. Its the parent of the element that will dictate its stacking order on the page. #horizontal_menu,#horizontal_menu li { position:relative;z-index:999}

So ensure your nav and the header have a higher z-index than the content element and its parent.

Thanks Dan !!

That one line of code, that you provided, is where I started... Well, it's also where I ended as it took care of the problem.