Internet Explorer issue with sukerfish drop down menu

Question

Im having an issue with a drop down menu in IE only and Im getting varied results to different version.

The navigation I'm reffering to is found here: http://lt.philosophydesign.com/

It works and displays fine in Firefox/Safari/Chrome. It displays fine in IE9 and IE8 however when you try to navigate past the first item in the drop down the drop down disapears. In IE7 and IE6 the drop down displays but behind the main body content.

Whats weird too is that if I remove the content of <div id="content"> the navigation displays and functions correctly in IE9 and IE8.

Here is the navigation CSS:

/* Navigation */
div#navcontainer {
    left:193px;
    position:absolute;
    top:108px;
    width:767px;
    z-index:1000;
}
div#navcontainer ul {
    display:block;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    width:100%;
}
div#navcontainer ul li {
    display:inline;
    float:left;
    margin-left:27px;
    position:relative;
}
div#navcontainer ul li a {
    color:#95006a;
    display:block;
    font-family:"LEWINRockwellExtraBoldRegular", "Arial Black", Gadget, sans-serif;
    font-size:14px;
    text-transform:uppercase;
    text-decoration:none;
}
div#navcontainer ul li.lightblue:hover a,
div#navcontainer ul li.lightblue.selected a,
div#navcontainer ul li.lightblue.sfHover a {
    color:#94CDF3;
}
div#navcontainer ul li.green:hover a,
div#navcontainer ul li.green.selected a,
div#navcontainer ul li.green.sfHover a {
    color:#71B9AE;
}
div#navcontainer ul li.limegreen:hover a,
div#navcontainer ul li.limegreen.selected a,
div#navcontainer ul li.limegreen.sfHover a {
    color:#BBD353;
}
div#navcontainer ul li.grey:hover a,
div#navcontainer ul li.grey.selected a,
div#navcontainer ul li.grey.sfHover a {
    color:#A8A9AC;
}
div#navcontainer ul li.darkblue:hover a,
div#navcontainer ul li.darkblue.selected a,
div#navcontainer ul li.darkblue.sfHover a {
    color:#1B2768;
}
div#navcontainer ul li.magenta:hover a,
div#navcontainer ul li.magenta.selected a,
div#navcontainer ul li.magenta.sfHover a {
    color:#CC2D88;
}
div#navcontainer ul li ul {
    position:absolute;
    top:-9999px;
    left:0;
    width:195px;
}
div#navcontainer ul li:hover ul, div#navcontainer ul li.sfHover ul{
    top:17px;
}
div#navcontainer ul li ul li {
    float:left;
    margin-left:0;
    width:195px;
}
div#navcontainer ul li ul li a {
    display:block;
    font-size:12px;
    margin-top:1px;
    padding: 2px 4px;
}
div#navcontainer ul li.lightblue ul li a {background:#94CDF3; color:#C9E6F9 !important;}
div#navcontainer ul li.green ul li a {background:#71B9AE; color:#C3DBD6 !important;}
div#navcontainer ul li.limegreen ul li a {background:#BBD353; color:#DFE9B0 !important;}
div#navcontainer ul li.grey ul li a {background:#A8A9AC; color:#D3D4D5 !important;}
div#navcontainer ul li.darkblue ul li a {background:#1B2768; color:#9092B0 !important;}
div#navcontainer ul li.magenta ul li a {background:#CC2D88; color:#D399C0 !important;}
div#navcontainer ul li.lightblue ul li a:hover,
div#navcontainer ul li.green ul li a:hover,
div#navcontainer ul li.limegreen ul li a:hover,
div#navcontainer ul li.grey ul li a:hover,
div#navcontainer ul li.darkblue ul li a:hover,
div#navcontainer ul li.magenta ul li a:hover {
    color:#fff !important;
}

And here is the navigation HTML:

<div id="navcontainer">
  <ul id="mainnav" class="nav">
    <li class="magenta<?php echo $selected['home']; ?>"><a href="/">Home</a></li>
    <li class="lightblue<?php echo $selected['location']; ?>"><a href="/location">Location</a>
      <ul>
        <li><a href="/location/area/travel">Travel</a></li>
        <li><a href="/location/area/parks">Parks</a></li>
        <li><a href="/location/area/shops">Shops</a></li>
        <li><a href="/location/area/leisure">Leisure</a></li>
        <li><a href="/location/area/eatdrink">Eat &amp; Drink</a></li>
      </ul>
    </li>
    <li class="green<?php echo $selected['specification']; ?>"><a href="/specification">Specification</a>
      <ul>
        <li><a href="/specification/area/general">General</a></li>
        <li><a href="/specification/area/kitchen">Kitchen</a></li>
        <li><a href="/specification/area/bedroom">Bedroom</a></li>
        <li><a href="/specification/area/bathroom">Bathroom</a></li>
      </ul>
    </li>
    <li class="limegreen<?php echo $selected['plans']; ?>"><a href="/plans">Plans</a>
      <ul>
        <li><a href="/plans/area/1bed">1 Bedroom Apartments</a></li>
        <li><a href="/plans/area/2bed">2 Bedroom Apartments</a></li>
      </ul>
    </li>
    <li class="grey<?php echo $selected['gallery']; ?>"><a href="/gallery">Gallery</a>
      <ul>
        <li><a href="/gallery/area/gallery">View Gallery</a></li>
      </ul>
    </li>
    <li class="darkblue<?php echo $selected['about-us']; ?>"><a href="/about-us">About Us</a></li>
    <li class="magenta<?php echo $selected['contact-us']; ?>"><a href="/contact-us">Contact Us</a></li>
  </ul>
</div>

And I have some jQuery to add a class to hovered LI as IE7< doesnt support the :hover on anything other than A tags.

$("div#navcontainer ul li").mouseenter( function() { $(this).addClass("sfHover"); } ); 
$("div#navcontainer ul li").mouseleave( function() { $(this).removeClass("sfHover"); } );

Can anyone help me figure out why this isnt working in IE?

Thanks

Scott

Answer 1

IE7's stacking order works differently to other browsers. Add z-index:2 to #header and z-index:1 to #content. This will give you the same results as IE8 and 9.

That result is caused by the spaces between the li's. If you move quickly enough you can select the lower items. I'm looking into a fix for that now.

EDIT

Not 100% this will work on all browsers but here you go: The issue is easily solved by adding a background colour to the dropdown ul. I assume this is undesirable so what you can do is add a background of a 1px by 1px transparent gif (should be a tiny file...) which will solve the issue and maintain the aesthetic

A bit of a hack but IE is that kind of browser! Surprised it doesnt work in IE9 though

Hope that helps

EDIT

I think the IE6 issue is with your javascript. Try using '>' in your selector. This gets the direct child of the element (as in my example below). This way your function won't fire when you mouseoff one of the drop down section list. Alternatively try this code (entirely untested and definitely needing refinement):

$("div#navcontainer > ul > li").mouseenter( function() { $(this).addClass("sfHover"); } ); 
$("div#navcontainer > ul > li > ul").mouseleave( function() { $(this).parent().removeClass("sfHover"); } );

Since the positioning remove the ul from the flow of the document this could also contribute to it firing early.