0

我们为我们的网站制作了一个下拉菜单，我们只需要在不同的浏览器中试用即可。下拉菜单在 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/

4

4 回答 4

2

这是解决方案。

的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相应的子元素。而已。

希望这可以帮助。

于 2013-05-22T12:45:02.970 回答
2

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

于 2013-05-22T12:49:14.163 回答
0

那个肯定在工作@Nathan Lee。

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

下拉式菜单

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

希望这对你也有好处！

于 2013-05-22T12:50:46.450 回答
0

加入. position: relative;_nav ul li

于 2013-11-21T06:10:44.943 回答