homepage Welcome to WebmasterWorld Guest from 54.237.151.188
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
z-index nav problems in FF and IE
Cannot get nav drop down to appear above main div
Preeminent

5+ Year Member



 
Msg#: 3968328 posted 6:55 am on Aug 8, 2009 (gmt 0)

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}

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

 

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved