fmz 14

I am working on a [site][1] 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.

4 answers

Mottie 1134
4
points
This was chosen as the best answer

I think I found the problem...

In this line of CSS, remove the float:none; and replace it with width:250px

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

I'd also recommend adding a bit of jQuery code to make the hover work in older IE versions (it's redundant, but effective):

<script type="text/javascript">
$(document).ready(function(){
 $('#pageHeader ul li').hover(function(){
  $(this).find('ul').show();
 },function(){
  $(this).find('ul').hide();
 })
})
</script>
Answered almost 7 years ago by Mottie
  • Hey Fudgey, thank you for the Christmas present. Getting rid of that float:none and setting the width made all the difference in the world. Thank you! fmz almost 7 years ago
  • You are very welcome and Merry Christmas! Mottie almost 7 years ago
Doug 1095
0
points

I don't have IE7 to test in at the moment, but try adding this line to the CSS:

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

My guess is that maybe IE7 is "forgetting" that hovering over the inner UL is the same as hovering over the containing LI, since the LI is not in the same screen location as the UL.

Answered almost 7 years ago by Doug
  • I'm sure you know this already, but for other visitors I should also point out that your method does not work at all in IE6 since that browser doesn't recognize :hover on anything but hyperlinks. Doug almost 7 years ago
  • Hi Doug. I gave this a try and it still slips away. I appreciate your suggestion though. fmz almost 7 years ago
Rob 230
0
points

I also don't have IE7 available to test right now but look into display:block for the anchor itself and not the li and sizing it. Possibly what's happening is the size of the anchor is not large enough and, when you slide off the anchor, the hover goes away. Making the anchor as large as the li should fix this.

Answered almost 7 years ago by Rob
  • Hi Rob, I checked and the anchor fills the entire space of the list element. For some reason I can now hover over the first of the drop down list items but then the rest vanish as soon as I try to hover over them. fmz almost 7 years ago
0
points

Have you got the whatever hover script loaded properly?

this won't work in IE6 and 7 without some javascript:

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

you should look at:

http://www.xs4all.nl/~peterned/csshover.html

Answered almost 7 years ago by Tony Crockford