IE7下拉菜单悬停问题

Question

在ie7中出现问题！请查看下面的图片，了解下拉菜单的外观。这在其他浏览器中都很正常，但在ie7中，一旦您离开主li元素（即顶部链接），菜单就会消失。我已经检查了所有内容并在每个元素周围设置了红色框，li元素正确地扩展以包含子菜单，但我无法修复它。有什么想法吗？

标记示例：

<nav>    
  <ul class="clearfix">    
    <li class="dropdown-link"><a href="#" class="main-link">Top Link</a>
      <ul class="clearfix dropdown-holder">
        <li>    
          <div class="arrow"></div>
          <div class="dropdown-holder-inner">
             <ul class="dropdown">
               <li><a href="#">Link</a></li>
               <li><a href="#">Link</a></li>
               <li><a href="#">Linky</a></li>
               <li><a href="#">Link</a></li>
               <li><a href="#">Link</a></li>
               <li class="last-child"><a href="#">Link</a></li>
             </ul>
           </div>
         </li>                            
      </ul>
     </li>
    </ul>
</nav>​

CSS相当繁重，因此我已经将完整代码放在jsfiddle上：http://jsfiddle.net/n2kgX/3/ 图片链接：http://i.stack.imgur.com/k24Du.png

- Amy

---

你在页面中包含了一个HTML5元素shim来覆盖IE中的<nav>元素吗？一旦完成，它看起来对我来说还不错，http://jsfiddle.net/n2kgX/6/show/。（如果你已经这样做了，我就不想把它作为答案发布） - Andres Ilich

已经使用了 Modernizer，没错！ - Amy

你能具体说明为什么 jho1086 的答案不应该得到悬赏作为正确答案的奖励吗？ - Bazzz

Answer 1

我在这里创建了一个示例：http://jsfiddle.net/jho1086/bbULV/5/，我稍微更改了HTML代码和CSS，因为我认为容器太多了。并且我更改了HTML5标签（<nav>），因为IE8及以下版本不支持HTML5，除非你有一个固定的解决方案。

<div id="nav">      
    <ul class="clearfix sf-menu">      
        <li class="dropdown-link"><a href="#" class="main-link">Top Link</a>  
            <div class="clearfix dropdown-holder">  
                <div class="arrow"></div>  
                <ul class="dropdown clearfix">  
                    <li><a href="#">Link</a></li>  
                    <li><a href="#">Link</a></li>  
                    <li><a href="#">Linky</a></li>  
                    <li><a href="#">Link</a></li>  
                    <li><a href="#">Link</a></li>  
                    <li class="last-child"><a href="#">Link</a></li>  
                </ul>    
            </div>    
        </li>  
    </ul>  
</div>

css

#nav { background:#6B6C6E; width:300px; margin:30px auto 0;}
.sf-menu li{float:left; font:12px/1em 'arial'; position:relative; padding:0 0 5px;}
.sf-menu li a{float:left;padding:12px 10px 5px;color:#fff; text-transform:uppercase;}
.sf-menu .dropdown-holder{
    position:absolute;
    left:-999em;
    width:218px; 
    top:93%;
}
.sf-menu li:hover .dropdown-holder {left:-999em;}

.sf-menu li:hover .dropdown-holder {left:0;}
.arrow { background:url(arrow.png) no-repeat left top; width:32px; height:8px; position:relative; z-index:2; left:10px;}
.dropdown {
    box-shadow:0 0 5px #bec2c8;
    background:#fff;
    height:100%;
    position:relative;
    z-index:1;
    padding:10px 10px 5px;
}
.sf-menu .dropdown li{text-transform:capitalize; border-bottom:1px solid #ccc;}
.sf-menu .dropdown li.last-child { border:0;}
.sf-menu .dropdown a{
    float:left;
    padding:5px 0;
    width:198px;
    color:#333;
}​​

希望它有所帮助。

- jho1086

Answer 2

我有一种感觉，您的示例过于复杂了。这是我所知道的最简单的嵌套菜单实现方法（使用hover）：

<ul class="outer">
    <li>
        <p>TOP MENU</p>
        <ul class="inner">
            <li><a href="#">link1</a></li>
            <li><a href="#">link2</a>
                <ul class="inner">
                    <li><a href="">link2.1</a></li>
                </ul>
            </li>            
            <li><a href="#">link3</a></li>
        </ul>
    </li>
</ul>

用一点css即可：

.outer {
    border: 1px solid red;
    width: 100px;
}

.inner {
    display: none;
}

.inner li {
    padding: 0 0 0 10px;
}

.outer li:hover > .inner {
    display: block;
}

在IE8上测试（以IE7标准模式运行）。在这里进行检查：http://jsfiddle.net/BUuyV/11/

- op1ekun

Answer 3

以下是您可以做的：

<!--[if lte IE 7]>
<style type="text/css">
nav ul li:first-child ul.dropdown-holder{
    left: 0px;
    top:-4px;
}
</style>
<![endif]-->

注意：要使:first-child在IE8及更早版本中工作，必须声明<!DOCTYPE>。

- Ibu