Question

在我的视图菜单下，我试图在子菜单中创建一个新的子菜单而没有任何成功。如何修改现有的CSS代码，使视图菜单下的子菜单2表现得像所有其他子菜单一样？

感谢。

<!DOCTYPE html>
<html>
<head>
<style>
#menu_container {
    width: 100%;
    background: rgb(250,252,254);
    border: 1px solid rgb(128,128,128);
    font-family: Arial;
    font-size: 9pt;
}

ul#menu, ul.submenu{
    margin: 0;
    padding: 0;
    list-style: none;
}
ul#menu li{
    float: left;
}
/* hide the submenu */
li ul.submenu {
    display: none;
}
ul#menu li a{
    display: block;
    text-decoration: none;
    padding: 7px 14px;
    float:none;
    color: rgb(51,51,51);
}
/* show the submenu */
ul#menu li:hover ul.submenu{
    display: block;
    position: absolute;
    float:left;
    border: 1px solid rgb(128,128,128);
}
ul#menu li:hover li,  ul#menu li:hover a {
    float: none;
    background: rgb(230,240,254);
    color: #000;
}
ul#menu li:hover li a {
    background: rgb(250,252,254);
    color: rgb(51,51,51);
}
ul#menu li:hover li a:hover {
    background: rgb(230,240,254);
    color: #000;

}
</style>
</head>

<body>

<div id="menu_container">
    <ul id="menu">
    <li><a href="#">File</a>
        <ul class="submenu">
            <li><a href="#">Close</a></li>
        </ul>
    </li>
    <li><a href="#">Edit</a>
        <ul class="submenu">
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
        </ul>
    </li>

    <li><a href="#">View</a>
        <ul class="submenu">
            <li><a href="#">Submenu 1</a></li>
                <ul><li><a href="#">Submenu 2</a></li></ul>
            <li><a href="#">Submenu 2</a></li>
        </ul>
    </li>


    <li><a href="#">Logoff</a></li>
    </ul>
</div>

</body>
</html>

Answer 1

您需要进行一些更改：

在Html上，将“subsubmenu”放在li内，并为其命名submenu：

<li>
  <a href="#">Submenu 1</a>
  <ul class="submenu">
    <li><a href="#">SubSubmenu 2</a></li>
  </ul>
</li>

在CSS上：

仅显示每个li的直接子子菜单，而不是所有子菜单>

ul#menu li:hover > ul.submenu{
  ....
}

为子菜单

创建新的选择器

ul.submenu li:hover > ul.submenu{
    display: block;
    position:absolute;
    left:100%;
    top:0;
    border: 1px solid rgb(128,128,128);
}

演示 http://jsfiddle.net/mK7qS/7/

水平下拉菜单，尝试在子菜单中创建另一个子菜单

1 个答案: