IE 7 中的下拉导航问题

Question

我正在开发一个 网站，该网站具有带下拉菜单的水平导航栏。这是由另一位不再从事该项目的开发人员构建的。

下拉菜单“下降”，在 FireFox 和 IE8 中可以很好地单击，但在 IE7 中，下拉菜单会下降，但当您尝试将鼠标悬停在下拉菜单上时就会消失。

这是导航的代码：

<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>

这是 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;}

我希望得到一些帮助，让导航在 IE7 中正常工作。

谢谢。

Answer 1

看起来像在 IE7 中，当我将鼠标移到下拉菜单上时，浏览器认为我的鼠标正在离开 LI（它将显示设置回“无”）。

Answer 2

感谢所有回复。我在 DocType 得到了一些帮助，回答了问题。事实证明我所需要的只是这个：

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

Answer 3

技巧是在 css 中使用 display:none 或 display:block 。

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

因此，除非该 LI 悬停，否则 UL 下的 LI 下的 UL 将被隐藏。

问题是 IE7 不支持 LI 的悬停伪类，仅支持链接。

所以......

只需将弹出子菜单的LI包装在一个链接中，并将悬停切换到该链接即可。

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

那应该有效