homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Gold Sponsor 2015!
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

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.

<div id="nav">
<li><a href="/index.php">Home</a></li>
<li><a href="/portfolio.php"
<div id="m2"
<a href="/web.php">Web</a>
<a href="/digital.php">Digital</a>
<a href="/print.php">Print</a>
<li><a href="/faq.php">FAQ</a></li>
<div style="clear:both"></div>

#main {
background: url("clipboardforcontent.png");
clear: both;

position: relative;

#nav ul
list-style: none;
padding: 0;
margin: 0;

#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