在IE 7中的下拉菜單導航問題

我正在使用一個帶有下拉菜單的水平導航欄的site。這是由另一名不再從事該項目工作的開發人員構建的。在IE 7中的下拉菜單導航問題

下拉式菜單中的「滴」，可以點擊罰款的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中正常工作提供一些幫助。

謝謝。

來源

2009-12-23 fmz

感謝所有作出答覆。我在DocType得到了一些回答這個問題的幫助。事實證明，我需要的是：

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

來源

2009-12-24 15:05:29 fmz

它看起來像在IE7中，當我將鼠標移動到下拉菜單上時，瀏覽器認爲我的鼠標正在離開LI（將顯示設置回'none'）。

來源

2009-12-23 17:06:09

-2

訣竅是在css中使用display：none或display：block。

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

因此，在UL下LI下的UL將被隱藏，除非該LI被徘徊。

問題是，IE7不支持懸停psuedo類fo LI，只有鏈接。

所以....

只是換行彈出子菜單中的鏈接L1和懸停切換到鏈接。

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

，並應工作

來源

2009-12-23 17:08:02 Eddie

-1 IE7是否支持懸停在任何東西上。 IE6是沒有的版本。 – 2009-12-23 17:08:49

嗨Eddie。我嘗試過，但不能完全正確地工作。你如何放置< a >標籤？ – fmz 2009-12-23 19:07:48

在IE 7中的下拉菜單導航問題

回答

相關問題