html - 下拉菜单在 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 fiddle :

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 */
}

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

希望这对您有所帮助。