下拉菜单在 IE 9 中表现怪异

Question

我们已经为我们的网站制作了一个下拉菜单，我们只需要在不同的浏览器中试用即可。下拉菜单在 Chrome 和 Firefox 中完美运行，但在 Internet Explorer 9 中 它的行为很奇怪。这是问题所在：每当您将鼠标悬停在 li 之间的空格之间时，就会显示主要下拉列表。这是html代码。

    <nav>
    <ul>
        <li class="mainLi"><a href ="matte/matte.html"> Matematik </a>
            <ul>
                <li><a href="matte/geometri.html">Geometri</a></li>
                <li><a href="matte/algebra.html">Algebra</a></li>
                <li><a href="matte/statistik.html">Statistik</a></li>
            </ul>
        </li>
        <li class="mainLi"><a href ="csharp/csharp.html"> C# </a>
            <ul>
                <li><a href="csharp/variabler.html">Variabler</a></li>
                <li><a href="csarp/villkor.html">Villkor</a></li>
                <li><a href="csharp/upprepning.html">Upprepning</a></li>
            </ul>
        </li>
        <li class="mainLi"><a href ="html/html.html"> HTML </a>
            <ul>
                <li><a href="taggar.html">Taggar</a></li>
                <li><a href="css.html">CSS</a></li>
            </ul>
        </li>
    </ul>
</nav>

这是 CSS：

.mainLi {
    margin-left: 40px;
}

nav ul li {

        border-right: 0px solid black;
        border-left: 0px solid black;
        float: left;
    }

nav ul ul  {
    display: none;
    background: #5f6975;
    border-radius: 0px;
    padding: 0;
    position: absolute;
    top: 100%;
    margin-left: 0%;
}

nav ul li:hover > ul  {
    display: inline;
}

nav ul ul li a {
    color: #fff;
    font-size: 21px;
    padding: 0.5px 5px;
    text-align: center;
}

nav ul ul li a:hover {
    background: #4b545f;
}

nav ul ul li  {
    float: none; 
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    border-right: 0;
    border-left: 0;
    position: relative;
    list-style-type: none;
    top: 100%;
}

nav ul li a  {
    display: block;
    text-decoration: none;
    color: black;
    font-size: 25px;
}

nav > ul > li:hover > a {
    display: block;
}

nav > ul > li:hover {
    background: rgb(183,208,226); /* Old browsers */
}

JS 小提琴：

http://jsfiddle.net/K5JGE/

Answer 1

这里是Solution。

HTML：

<nav>
    <ul>
        <li class="mainLi"><a href ="matte/matte.html"> Matematik </a>
            <ul>
                <li><a href="matte/geometri.html">Geometri</a></li>
                <li><a href="matte/algebra.html">Algebra</a></li>
                <li><a href="matte/statistik.html">Statistik</a></li>
            </ul>
        </li>
        <li class="mainLi"><a href ="csharp/csharp.html"> C# </a>
            <ul>
                <li><a href="csharp/variabler.html">Variabler</a></li>
                <li><a href="csarp/villkor.html">Villkor</a></li>
                <li><a href="csharp/upprepning.html">Upprepning</a></li>
            </ul>
        </li>
        <li class="mainLi"><a href ="html/html.html"> HTML </a>
            <ul>
                <li><a href="taggar.html">Taggar</a></li>
                <li><a href="css.html">CSS</a></li>
            </ul>
        </li>
    </ul>
</nav>

CSS：

.mainLi {
    margin-left: 40px;
}

nav ul li {

        border-right: 0px solid black;
        border-left: 0px solid black;
        float: left;
    position:relative;
    }

nav ul ul  {
    display: none;
    background: #5f6975;
    border-radius: 0px;
    padding: 0;
    position: absolute;
    top: 100%;
    margin-left: 0%;
}

nav ul li:hover > ul  {
    display: inline;
}

nav ul ul li a {
    color: #fff;
    font-size: 21px;
    padding: 0.5px 5px;
    text-align: center;
    position:relative;
}

nav ul ul li a:hover {
    background: #4b545f;
}

nav ul ul li  {
    float: none; 
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    border-right: 0;
    border-left: 0;
    position: relative;
    list-style-type: none;
    top: 100%;
}

nav ul li a  {
    display: block;
    text-decoration: none;
    color: black;
    font-size: 25px;
}

nav > ul > li:hover > a {
    display: block;
}

nav > ul > li:hover {
    background: rgb(183,208,226); /* Old browsers */
}

您只需要相应地position 子元素。就是这样。

希望对您有所帮助。

Answer 2

另外，如果您使用 nav ul ul top:100%;关闭，它也可以工作。

Answer 3

那肯定是@Nathan Lee。

您也可以使用此“模板”或任何您想调用的名称，并将其制作成您自己的。 嗯，这就是我一直做的！

DropDownMenu

这是我从 PSDCenter 使用的。 （来自乔治·奥斯蒙德）

希望这对你也有好处！

Answer 4

在nav ul li 中添加position: relative;。