Question

我的网站上有一个导航菜单，其中一个链接上有一个子菜单。当用户将鼠标悬停在父级li元素上时，将显示子菜单。

在现代浏览器上，这种方法非常有效，但是在Internet Explorer 8中，悬停在li上会显示子菜单，然后在尝试选择任何子菜单元素时立即将其隐藏。这意味着子菜单变得无法使用，因为您无法在其上选择任何内容。

我已经尝试将子菜单直接放在li下面，以便它们之间没有间隙导致这种情况，但问题仍然存在。

我已将代码放入小提琴中，以便您自己查看问题。使用嵌入式链接在IE 8中正确查看。

小提琴（来源）：http://jsfiddle.net/2gK5p/3/
嵌入式（最适合IE 8兼容性）：http://jsfiddle.net/2gK5p/3/embedded/result/

继承人HTML：

<ul>
    <li class="selected"><a href="#">Home</a></li>
    <li><a href="#">Services</a>
        <ul class="subnav-wrapper">
            <span class="container block">
                <span class="subnav">
                    <li><a class="subnav-heading" href="#">Header 1</a></li>
                    <li><a href="#">Sub 1</a></li>
                    <li><a href="#">Sub 2</a></li>
                    <li><a href="#">Sub 3</a></li>
                </span>
                <span class="subnav">
                    <li><a class="subnav-heading" href="#">Header 2</a></li>
                    <li><a href="#">Sub 1</a></li>
                    <li><a href="#">Sub 2</a></li>
                    <li><a href="#">Sub 3</a></li>
                </span>
                <span class="subnav">
                    <li><a class="subnav-heading" href="#">Header 3</a></li>
                    <li><a href="#">Sub 1</a></li>
                    <li><a href="#">Sub 2</a></li>
                    <li><a href="#">Sub 3</a></li>
                </span>
            </span>
        </ul>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

而CSS：

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box; }

ul {
    list-style: none;
}
li {
    float: left;
    margin: 0 8px;
}
li:hover a {
    text-decoration:none;
}
li:hover .subnav-wrapper {
      display: block; 
}
.subnav-wrapper {
  background-color: green;
  width: 100%;
  position: absolute !important;
  padding: 20px 0;
  display: none;
  top: 36px;
  left: 0;
}
.subnav-wrapper .container {
    float: none; 
}
.subnav {
    float: left;
    width: 33%;
    padding: 0 2%;
    position: relative; 
}
.subnav li {
    width: 100%;
    float: left;
    margin: 0; 
}
.subnav li a {
    width: 100%;
    float: left;
    padding: 5px 10px; 
}

.subnav li .subnav-heading {
      text-align: center;
      padding: 12px 10px;
      margin: 0 0 12px;
      font-size: 1.2em;
      color: white;
      background-color: blue; 
}

感谢您对此提供任何帮助！

Answer 1

您在li和IE中的子菜单下有一点差距。

您可以使用伪元素填充它以增加li的区域： DEMO

li:after {
    content:'';
    display:block;
    height:8px;
    margin-bottom:-8px;
}

当悬停时，IE 8不会保持子菜单打开

1 个答案: