Question

我在子菜单上创建了一个仅使用display：none的css导航菜单，并且在悬停时显示：阻止但由于某种原因，IE 9不会显示子菜单，但chrome和firefox会显示。 W3C说IE支持：悬停所以我不确定为什么这不起作用。这是我用于菜单的CSS：

#menu {
    position:relative;
    font:1.5em 'Calibri',sans-serif;
    color:#fff;
    list-style:none outside none;
    margin:0 auto;
    padding:0;
    width:90vw;
    text-align:center;
}

#menu li {
    display:inline-block;
    margin:0 20px;
    padding:0;
    padding-bottom:30px;
    color:#fff;
    text-align:center;
    position:relative;
}

#menu li ul {
    position:absolute;
    text-align:center;
    z-index:9999;
    top:40px;
    width:150px;
    display:none;
    padding:10px;
    left:50%;
    margin-left:-120px;
} 

#menu li:hover ul {
    display:block;
}

#menu li ul li {
    background: rgb(59,103,158); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(59,103,158,1) 0%, rgba(43,136,217,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(59,103,158,1)), color-stop(50%,rgba(43,136,217,1)), color-stop(51%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
    text-align:center;
    border:1px solid #646464;
    width:150px;
    padding:10px;
    vertical-align: middle;
}

#menu li ul li:last-child {
    -webkit-border-radius: 0 0 8px 8px;
    -moz-border-radius: 0 0 8px 8px;
    border-radius: 0 0 8px 8px;
}   

#menu li a:link {
    text-decoration:none;
    color:#C2C2C2;
}

#menu li a:visited {
    text-decoration:none;
    color:#C2C2C2;
}

#menu li a:hover {
    text-decoration:none;
    color:#fff;
}

#menu li a:active {
    text-decoration:none;
    color:#fff;
}

好的，所以这里是html（请记住这是由Wordpress生成的，所以它有额外的类和添加的东西）

<nav class="menu-main-menu-container">
    <ul id="menu" class="menu">
        <li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-51"><a title="Home" href="http://www.stretchmyincome.com/">Home</a></li>
        <li id="menu-item-53" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-53"><a href="http://www.stretchmyincome.com/about-the-author.html">About</a>
            <ul class="sub-menu">
                <li id="menu-item-57" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-57"><a href="http://save.stretchmyincome.com/category/beauty/">Beauty</a></li>
                <li id="menu-item-58" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-58"><a href="http://save.stretchmyincome.com/category/restaurants/">Restaurants</a></li>
            </ul>
        </li>
        <li id="menu-item-54" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-54"><a href="http://www.stretchmyincome.com/purchase.php">Purchase Ebook</a></li>
        <li id="menu-item-55" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-55"><a href="http://www.stretchmyincome.com/news.html">Money News</a>
            <ul class="sub-menu">
                <li id="menu-item-59" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-59"><a href="http://save.stretchmyincome.com/category/transportation/">Transportation</a></li>
                <li id="menu-item-60" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-60"><a href="http://save.stretchmyincome.com/category/cultural/">Cultural</a>
            </ul>
        </li>
        <li id="menu-item-56" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-56"><a href="http://www.stretchmyincome.com/contact.php">Contact Us</a></li>
    </ul>
</nav>

如果有人想知道为什么子菜单不会出现在IE9中会非常有帮助。

Answer 1

您是否获得了有效的doctype声明？ http://www.w3schools.com/tags/tag_doctype.asp

Answer 2

不知道你是否已经解决了这个问题，我刚到办公室，我记得昨天这个问题。我在js小提琴中复制/粘贴你的代码，事实证明它实际上有一个html错误，这行没有结束标记：

<li id="menu-item-60" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-60"><a href="http://save.stretchmyincome.com/category/cultural/">Cultural</a>

IE和其他浏览器处理html错误有点不同，所以记得要始终验证你的标记！ http://validator.w3.org/

这是你的小提琴：http://jsfiddle.net/XeQW2/1/

错误修复的那个：http://jsfiddle.net/XeQW2/2/

原因也可能是别的，但这应该缩小一点

IE 9没有使用悬停响应css下拉列表

2 个答案: