Dropdown navigation problems in IE 7

Question

I am working on a site that has a horizontal navigation bar with dropdown menus. This was built by another developer who is no longer working on the project.

The dropdowns "drop" and can be clicked on fine in FireFox and IE8 but in IE7 the dropdowns drop but disappear as soon as you try and mouse over them.

Here is the code for the navigation:

<ul>
  <li ><a href="index.html">Home</a></li>
  <li><a href="#">Company</a>
    <ul>
      <li><a href="company-aboutus.html">About Us</a></li>
      <li><a href="company-locations.html">Locations</a></li>
      <li><a href="company-careers.html">Careers</a></li>
      <li><a href="company-isoqsquality.html">ISO &amp; QS Quality</a></li>
      <li><a href="company-regulation.html">Regulations</a></li>
      <li><a href="http://www.unionink.com" target="_blank">Union Ink</a></li>
    </ul>
  </li>
  <li><a href="#">Products</a>
    <ul>
      <li><a href="printing-main.html">Screen Printing Products</a></li>
      <li><a href="automotive-main.html">Automotive Products</a></li>
      <li><a href="industrial-main.html">Industrial Products</a></li>
    </ul>
  </li>
  <li><a href="#">News &amp; Events</a>
    <ul>
      <li><a href="news-rutland.html">Rutland News</a></li>
      <li><a href="news-newproducts.html">New Products</a></li>
      <li><a href="news-tradeshowschedule.html">Trade Show Schedule</a></li>
      <li><a href="news-dealerseminars.html">Dealer Seminars</a></li>
      <li><a href="news-industrylinks.html">Industry Links</a></li>
    </ul>
  </li>
  <li><a href="faq.html">FAQ's</a> </li>
  <li><a href="#">Dealers</a>
    <ul>
      <li><a href="printing-northamerican.html">North America</a></li>
      <li><a href="printing-international.html">International</a></li>
    </ul>
  </li>
  <li class="last"><a href="contactus-main.html">Contact</a> </li>
</ul>

Here is the CSS:

#pageHeader ul{position: absolute; bottom: 0; left: 0; width: 997px; background: transparent url(../images/nav-background.gif) top left no-repeat; height: 29px;}
#pageHeader ul li{float: left; position: relative;}
#pageHeader ul li a{display: block; float: left; font-size: 16px; font-family: Tahoma, Arial, sans-serif; text-decoration: none; color: #FFF; padding: 0 35px; background: transparent url(../images/nav-divider.gif) right center no-repeat; height: 29px; line-height: 29px;} 
#pageHeader ul li.last a{background: none;}

#pageHeader ul li a:hover,
#pageHeader ul li.active a{color: #00BCE4;}
#pageHeader ul li ul{width: auto; background-color: #FFF; height: auto; display: none; position: absolute; top: 29px; left: 0; width: 190px;}
#pageHeader ul li:hover ul{display: block;}
#pageHeader ul li ul li{float: none; display: block; background-color: #FFF; border: 1px solid  #CDCED0; border-top: 0;}
#pageHeader ul li ul li a{float: none; background: none; color: #231F20; padding-bottom: 3px;  font-size: 12px; white-space: nowrap;}
#pageHeader ul li ul li a:hover{background-color: #58595B;}

I would appreciate some help in getting the navigation working properly in IE7.

Thanks.

Answer 1

It looks like in IE7, when I move my mouse over the drop menu, the browser thinks my mouse is leaving the LI (which sets display back to 'none').

Answer 2

The trick is using display:none or display:block in the css.

#pageHeader ul li ul{ display: none;}
#pageHeader ul li:hover ul{display: block;}

So a UL under a LI under a UL will be hidden unless that LI is hovered.

The problem is that IE7 does not support the hover psuedo class fo LI, only links.

So....

just wrap the LI that pops out the sub menu in a link, and switch the hover to the link.

#pageHeader ul a li ul{ display: none; }
#pageHeader ul a:hover li ul{display: block;}

and that should work

Answer 3

Thanks to all that replied. I got some help over at DocType that answered the question. It turns out that all I needed was this:

#pageHeader ul li ul li { width:250px; display: block; background-color: #FFF; border: 1px solid #CDCED0; border-top: 0;}