PDA

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



pandoradora
10-31-2011, 10: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, 10: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, 10:38 AM
Hey,

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

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

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

SB65
10-31-2011, 11: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, 11: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!