2

我对 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，但没有内容（没有来自 As 的文本）。列表以样式显示，就好像它们没有被悬停一样。

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

谢谢。

4

1 回答 1

1

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

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

于 2012-10-19T20:53:21.140 回答