Question

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

下拉菜单“丢弃”并且可以在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不支持悬停psuedo类fo LI，只支持链接。

...所以

只需将链接中弹出子菜单的LI包裹起来，然后将悬停切换到链接。

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

这应该有用

IE 7中的下拉导航问题

3 个答案: