Welcome to WebmasterWorld Guest from 54.196.224.166

Forum Moderators: not2easy

Message Too Old, No Replies

z-index nav problems in FF and IE

Cannot get nav drop down to appear above main div

     

Preeminent

6:55 am on Aug 8, 2009 (gmt 0)

5+ Year Member



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 page 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.

HTML:----------------------------------------------

<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>

-----------------------------------------------------
CSS---------------------------------------------------
#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}


------------------------------------------------