Question

我有一个CSS下拉菜单的以下标记：

<ul>
    <li><a>FieldOne LevelOne</a></li>
    <li><a>FieldTwo LevelOne</a></li>
    <li><a>FieldThree LevelOne</a>
        <ul>
            <li><a>FieldOne LevelTwo</a>
                <ul>
                    <li><a>FieldOne LevelThree</a></li>
                    <li><a>FieldTwo LevelThree</a></li>
                </ul>
            </li>
            <li><a>FieldTwo LevelTwo</a>
                <ul>
                    <li><a>FieldOne LevelOn</a></li>
                </ul>
            </li>
       </ul>
  </ul>

以下CSS：

ul ul {
    display: none;
}

ul li {
    list-style: none;
}

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

ul
{
    background: #76b800;
    padding: 0 20px;
    margin-left: 5px;
    border-radius: 10px;
    list-style: none;
    position: relative;
    display: inline-table;
}

ul:after {
    content: ""; clear: both; display: block;
}

ul li {
    float: left;
    min-width: 140px;
    text-align: center;
    vertical-align: bottom; 
}

ul li:hover {
    background-color: #4478B7;
}

ul li a
{
    display: block;    
    padding: 10px 40px 10px 40px;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
}

ul ul {
    background: #4478B7; 
    padding: 0;
    position: absolute; 
    top: 100%;
    z-index: 5;
    margin: 0;
}

ul ul li
{
    float: none;
    border-top: 1px solid;
    border-bottom: 1px solid;
    position: relative;
    border-style: solid;
    border-width: 1px;
    border-color: #88AAD2 white #335B8C white;
}

ul ul li:hover
{
    background-color: #396599;
    background-image: none;
}

ul ul li a {
    color: #fff;
    min-width: 140px !important;
    padding: 10px 40px 10px 40px !important;
    font-size: 16px !important;
}   

ul ul li a:hover {
    background: #233F61;
}

ul ul ul {
    position: absolute; 
    left: 100%; 
    top:0;
}

问题：当您转到第二级并将鼠标悬停在LI上时，会显示第三级列表。如果你在第二级中从一个LI转到另一个LI，则嵌套在第一个LI内的第三个级别列表会消失，而嵌套在第二个LI中的第三个级别列表会出现（如果它有一个）。

BUT

如果您完全离开二级列表而不通过在二级菜单中导航而使第三级菜单消失，一旦重新列出第二级菜单，最后显示的第三级菜单出现旁边有LI，但没有内容（没有来自As的文字）。列表显示的风格好像没有被徘徊。

您可以在此处查看效果：http://jsfiddle.net/JE8ZM/。如果你在IE9或Chrome上运行它，它可以工作。但是如果你在IE7上运行它，尝试转到FieldOne LevelTwo，将鼠标悬停在它上面然后离开它，而不进入显示的第三级菜单。然后将鼠标悬停在FieldThree LevelOne上，看看我的意思。

感谢。

Answer 1

如果没有Javascript或jQuery的帮助，嵌套的子导航菜单非常难以跨浏览器工作。这是我所知道的最好的'纯CSS'资源，它将解决您的问题！

http://www.cssplay.co.uk/menus/final_drop2.html

CSS DropDown菜单：离开二级后，三级列表不会隐藏

1 个答案: