...

View Full Version : Drop down menus and the IE z-index problem



pandoradora
10-31-2011, 09:08 AM
Hello all,

I'm trying to create a sliding drop-down menu that's completely vertical, meaning that both levels of navigation are aligned vertically, and the 2nd level opens over the first. This works great in all browsers - except, of course, IE, where the 2nd level opens under the 1st. I assume this is a z-index issue, but I haven't been able to solve it.

I'm using this jquery code for the slide:


$(document).ready(function() {

$('#nav li').hover(
function () {
//show its submenu
$('ul', this).slideDown(100);

},
function () {
//hide its submenu
$('ul', this).slideUp(100);


}
);

});


This is my css (in IE) for the nav bar:


.clear {clear:both}



#nav
{
margin:0;
padding:0;
list-style:none;
padding-left:1%;
top:0;
bottom:20%;
margin-bottom:10%;
padding-bottom:1%;
color:#777371;
font-face:arial;
font-size:100%;
background:#fff;
width:100%;
font-weight:bold;
}

#nav li
{
position:relative;
float:left;
width:60%;
margin:0 1px;
padding-top:13%;
padding-bottom:3%;
z-index:1000;
}


#nav li a {
text-decoration:none;
color:#777371;
}

#nav li a:hover {
color:#555555;
}


#nav a.selected {
color:#555555;
}

#nav ul {
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
}


#nav ul li {
width:100%;
float:left;
font-size:90%;
font-weight:normal;
background:#000;
padding-top:4%;
padding-left:2%;
padding-bottom:3%;
position:relative;
z-index:2000;
}

#nav ul a {
display:block;
height:20%;
padding: 2% 3%;
color:#777371;
}


#nav ul a:hover {
text-decoration:none;
color:#555555;
}

*html #nav ul {
margin:0 0 0 -2px;
}


And this is my html:


<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="cv.html">CV</a></li>

<li><a href="#">Research</a>
<ul>
<li><a href="publications.html">Publications</a></li>
<li><a href="talks.html">Talks</a></li>
</ul>
<div class="clear"></div>
</li>

<li><a href="#">Teaching</a>
<ul>
<li><a href="lectures.html">Lectures</a></li>
<li><a href="tutorials.html">Tutorials</a></li>
<li><a href="seminars.html">Seminars</a></li>
</ul>
<div class="clear"></div>
</li>
<li><a href="misc.html">Misc.</a></li>
<li><a href="contact.html">Contact </a></li>
</ul>
<div class="clear"></div>


Any help would be greatly appreciated. Thanks!

SB65
10-31-2011, 09:27 AM
I think this is your problem:


#nav li
{
position:relative;
float:left;
width:60%;
margin:0 1px;
padding-bottom:3%;
z-index:1000;
}


This is making the li elements appear on top of the drop down ul - in FF7 as well as IE8. Try removing that z-index.

pandoradora
10-31-2011, 09:38 AM
Hey,

Thanks for the quick reply.
I removed it, but the problem still persists in IE.

SB65
10-31-2011, 09:42 AM
What version of IE are you using?

pandoradora
10-31-2011, 09:51 AM
I'm using IE8.

SB65
10-31-2011, 10:07 AM
Something else going on somewhere then because I don't see a problem in IE8. Have a look at this test page (http://www.simonbattersby.com/test/test_dropdown.htm).

Do you have a valid doctype (http://www.alistapart.com/articles/doctype/) on your page? If not that's probably the reason.

pandoradora
10-31-2011, 10:15 AM
I do have a valid doctype, but when I double checked I realized I had a IE quirks mode comment at the top of my page.
Don't even remember putting it there, but without it the whole thing works fine. Thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum