在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中的下拉菜单导航问题

回答

相关问题