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

此外，如果你采取导航ul ul顶部：100％;关闭，它也会起作用。

Answer 3

那个人肯定在为@Nathan Lee工作。

你也可以使用这个“模板”或任何你想要的东西，然后把它变成你自己的。嗯，这就是我一直以来做的事情！

DropDownMenu

这是我从PSDCenter使用的。（来自George Orsmond）

希望这对你也有好处！

Answer 4

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

下拉菜单在IE 9中表现得很奇怪

4 个答案: