IE6 Drop down issue

Question

Im having an issue with getting my drop down to show in IE6. Its seems to work fine in IE7 and 8. Any help would be greatly appreciated

Here is a preview link: http://arrowheadproducts.net.c1.previewmysite.com/2010Nov/index.aspx

Here is the HTML:

 <div id="nav">
    <div id='leftheader_top'><img src='images/logo2.jpg' /></div>
 <div id="top_nav01"><a id="nav01" href="index.aspx"></a></div>
  <div id="top_nav02">  
  <div class='list'>
  <ul>
    <li><a id="nav02" href="products.aspx"></a>
        <ul>
        <li><a border='0' id="drop_01" href="metalsystemsandproducts.aspx"></a></li>
        <li><a border='0' id="drop_02" href="compositesystemsandcomponents.aspx"> </a></li>
        </ul>
    </li>
 </ul>
</div>
</div>
<div id="top_nav03">
<div class='list'>
 <ul>
    <li><a id="nav03" href="services.aspx"></a>
        <ul>
        <li><a border='0' id="drop_02_01" href="engineering.aspx"></a></li>
        <li><a border='0' id="drop_02_02" href="testing.aspx"></a></li>
        <li><a border='0' id="drop_02_03" href="manufacturing.aspx"></a></li>
        </ul>
    </li>
  </ul>
</div>
</div>
<div id="top_nav04">
<div class='list'>
 <ul>
    <li><a id="nav04" href="support.aspx"></a>
        <ul>
        <li><a border='0' id="drop_03_01" href="warranty.aspx"></a></li>
        <li><a border='0' id="drop_03_02" href="quality.aspx"></a></li>
        <li><a border='0' id="drop_03_03" href="aftermarketdistribution.aspx"></a></li>
        <li><a border='0' id="drop_03_04" href="supplychainmanagement.aspx"></a></li>
        </ul>
    </li>
  </ul>
</div>
</div>
<div id="top_nav05">
<div class='list'>
 <ul>
    <li><a id="nav05" href="company.aspx"></a>
        <ul>
        <li><a border='0' id="drop_04_01" href="history.aspx"></a></li>         
        <li><a border='0' id="drop_04_02" href="contacts.aspx"></a></li>
        <li><a border='0' id="drop_04_03" href="sitemap.aspx"></a></li>
        <li><a border='0' id="drop_04_04" href="legal.aspx"></a></li>
        </ul>
    </li>
  </ul>
</div>
</div>
</div>

</div>

CSS:

    .list ul {
    margin: 0;
    padding: 0;
    float: left; 
}

    .list ul li{
    list-style: none;
}

    .list ul ul {
    position: absolute;
    list-style: none;
   z-index: 500;
}

    .list ul ul a {
    text-decoration: none;
}

    .list ul ul li a:hover {
    text-decoration: none;
    display: block;
}

    .list ul ul li {
}

    .list ul ul li:hover {
    text-decoration: none;
    display: block;
}

    div.list ul ul {
    display: none;
}

    div.list ul ul,
    div.list ul li:hover ul ul,
    div.list ul ul li:hover ul ul
    {display: none;position:relative;}

    div.list ul li:hover ul,
    div.list ul ul li:hover ul,
    div.list ul ul ul li:hover ul
    {display: block;position:relative;}

    div.list img {
    vertical-align: middle;
    overflow: hidden;
    width: 16px;
    height: 16px;
    margin: 0 8px 0 0;
}

Answer 1

Your code includes this: .list ul ul li:hover

IE6 does not support :hover except on <a> tags. It's one of the major problems with trying to support this sort of thing in IE6, and it's one of the reasons that CSS menus didn't really become popular until IE6 started losing significant market share.

The good news is that there are hacks for IE6 to make it support hover on any element.

The most well-known one is Whatever:hover . This is very simple to install (a single short bit of IE-specific CSS), and the problem is fixed, provided the IE6 user hasn't turned off Javascript.

The hack is run via CSS, but is actually Javascript-based, so if the user has turned off Javascript, then it won't work. Nothing you can do about that, I'm afraid, as that's pretty much the only solution you'll get.

A far better solution is simply not to support IE6 any more -- it has plenty of other issues, and not all of them have a nice easy solution like that.

One final note: Since this is an IE6-specific issue, you may want to use conditional comments or something similar to ensure that it only runs in IE6. Otherwise you might actually make things worse for IE7 and IE8! (I don't know for sure, since this hack was written before IE7 was released, and I haven't used it in a number of years now either).

Answer 2

Real issue is ie6 not support li:hover which support only on a tag

so we are using jQuery "li" hover function , which will support all browsers

<script type="text/javascript">
  $('ul#nav li').hover(function()
              {
              $(this).find('ul').stop(true,true).slideDown()
              },
              function()
              {
              $(this).find('ul').stop(true,true).slideUp()
});
</script>

check this link http://jsfiddle.net/nPdNd/29/