Question

我的菜单栏在IE 10中无效。二级菜单无法打开。它在谷歌Chrome，Firefox，Safari，Opera中运行良好，但不适用于IE10。当我进入菜单项时，如何确保二级菜单打开？

CSS：

    #top-menu {
        position:absolute;
        left:0;
    }
    #top-menu li {
        float:left;
        height:100%;
        position:relative;
    }
    #top-menu li a {
        color:#003366;
        width:100%;
        height:100%;
        position:relative;
        font:20px/28px 'Trebuchet MS', Trebuchet, Verdana, sans-serif;
    }
    #top-menu li img {
        display:block;
        padding:4px;
    }
    #top-menu li:hover ul {
        z-index:999;
        top:100%;
        left:0;
    }
    #top-menu ul {
        z-index:-1111;
        top:0;
        width:auto;
        background-color:#FFFFFF;
        position:absolute;
        border:4px solid #003366;
        border-top:0;
        -webkit-transition: all 500ms ease-in-out;
        -moz-transition: all 500ms ease-in-out;
        -ms-transition: all 500ms ease-in-out;
        -o-transition: all 500ms ease-in-out;
        transition: all 500ms ease-in-out;
    }
    #top-menu ul li {
        white-space:nowrap;
        width:100%;
        float:left;
    }
    #top-menu ul li a {
        font-size:16px;
        padding:5px;
        -webkit-transition: all 500ms ease-out;
        -moz-transition: all 500ms ease-out;
        -ms-transition: all 500ms ease-out;
        -o-transition: all 500ms ease-out;
        transition: all 500ms ease-out;
    }
    #top-menu ul li:hover {
        background-color:#003366;
    }
    #top-menu ul li:hover a {
        color:#FFFFFF;
    }

HTML + PHP：

<ul id="top-menu">
            <li><a href="index.php" title="Homepage"><img src="img/menu/home.png" alt="Homepage" /></a></li>
            <li><a href="#" title="List & Print residents"><img src="img/menu/list-print.png" alt="List & Print residents" /></a>
                <ul>
                    <li><a href="list-residents.php?sortby=name" title="List residents by Name">List by Name</a></li>
                    <li><a href="list-residents.php?sortby=lot" title="List residents by Lot Number">List by Lot Number</a></li>
                    <li><a href="list-residents.php?sortby=date-added" title="List residents by Date Added">Date Added</a></li>
                </ul>
</li>

Answer 1

如果这与IE10 Touch版本有关，您可以通过将aria-haspopup="true"添加到所有顶级菜单项来轻松解决此问题。

Answer 2

问题是由于我在代码之前放置了一些jquery代码。

问题解决了。

二次菜单在悬停时不会打开（IE10）

2 个答案: