Forums

Preeminent

Hey all,
I have a css nav with one link in that nav having a dropdown menu. The whole NAV div is positioned relatively. The dropdown box is appearing behind my #Main Div graphic which is also positioned relatively. I looked at other posts like this and thought that using negative z-index would work, but it isn't.
Here is my question though. Should I be adding the z-index to the whole NAV div or is it possible to add a z-index to the dropdown menu that comes down when my link is clicked?
I am going to post a bit of code and maybe someone will have a suggestion.

<div id=\"nav\">
<ul>
<li><a href=\"/index.php\">Home</a></li>
<li><a href=\"/portfolio.php\"
onmouseover=\"mopen('m2')\"
onmouseout=\"mclosetime()\">Portfolio</a>
<div id=\"m2\"
onmouseover=\"mcancelclosetime()\"
onmouseout=\"mclosetime()\">
<a href=\"/web.php\">Web</a>
<a href=\"/digital.php\">Digital</a>
<a href=\"/print.php\">Print</a>
</div>
</li>
<li><a href=\"/faq.php\">FAQ</a></li>
</ul>
</div>
<div style=\"clear:both\"></div>

#main {
position:relative;
background: url(\"clipboardforcontent.png\");
height:720px;
width:960px;
overflow:hidden;
clear: both;
z-index:-1;
}

#nav{
padding-top:30px;
margin:0;
position: relative;
z-index:1;
}


#nav ul
{
list-style: none;
padding: 0;
margin: 0;
font-size:40px;
}

#nav li
{
margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 20px arial
}

#nav li a
{display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 80px;
background: #a98149;
color: #FFF;
text-align: center;
text-decoration: none;

}

#nav li a:hover
{background: #4e2c4a}

#nav div
{position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #a98149;
border: 1px solid #5970B2}

#nav div a
{position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: 80px;
white-space: nowrap;
text-align: center;
text-decoration: none;
background: #4e2c4a;
color: #FFF;
font: 11px arial}

#nav div a:hover
{background: #a98149;
color: #FFF}

treehouse : what would you like to learn today?

Forums

Problem with css dropdown menu and z-index