Question

我有一个3级css菜单。您可以在此处查看我的实际代码http://jsfiddle.net/7rMgu/

正如您所看到的，在第3级导航时，我的辅助级别不会保持浅蓝色背景。我查看了网站上的类似帖子，但我发现只有2个级别的类似问题。此外，有人可以解释我何时应该使用'＆gt;'在CSS中，因为我有点困惑。

CSS

html{height:100%;background-color:#0d497d;}
body{width:100%;height:100%;margin:0px;padding:0px;color:#575757;font:0.75em "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;}
div.menuAdmin ul{margin:0;padding:0;float:right;height:100%;}
div.menuAdmin ul li{display:block;float:left;height:23px;margin-bottom:0;}
div.menuAdmin ul li a{color:#fff;padding:0.1em 0.3em 0.2em 0.3em;text-decoration:none;font-size:12px;display:block;margin:0.85em 0em 0em 0em;width:130px;background-color: #0d497d;border:1px solid #78B9EF;border-radius:5px;}
div.menuAdmin ul li:hover a{color:#000;border-radius:5px;background-color:#78B9EF;}
div.menuAdmin ul li ul{display:none;}
div.menuAdmin ul li:hover > ul {display:block;height:20px;width:139px;position:absolute;margin:0;}
div.menuAdmin ul li:hover > ul li a {line-height: 20px;color:#fff;text-decoration: none;margin: 0;padding-bottom: 0.1em;background-color: #0d497d;border:1px solid #78B9EF;border-radius:5px;}
div.menuAdmin ul li:hover > ul li a:hover {color:#000;text-decoration:none;text-shadow:none;background-color: #78B9EF;}
div.menuAdmin ul ul li:hover > ul {display:block;position:absolute;left:100%;top:0;width:139px;}
div.menuAdmin ul > ul > ul li:hover > a {color:#444;background-color:#78B9EF;}

HTML

<div class='menuAdmin'>
    <ul>
        <li>
            <a href=''>A</a>
            <ul>
                <li>
                    <a href=''>1</a>
                    <ul>
                        <li>
                            <a href=''>A1</a>
                        </li>
                        <li>
                            <a href=''>A2</a>
                        </li>
                        <li>
                            <a href=''>A3</a>
                        </li>
                        <li>
                            <a href=''>A4</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href=''>2</a>
                </li>
                <li>
                    <a href=''>3</a>
                </li>
                <li>
                    <a href=''>4</a>
                </li>
            </ul>
        </li>
        <li>
            <a href=''>B</a>
        </li>
        <li>
            <a href=''>C</a>
        </li>
        <li>
            <a href=''>D</a>
        </li>
    </ul>
</div>

由于

Answer 1

为了保持:hover效果，您需要将li元素悬停在a元素上，而不仅仅是ul标记，这样您就可以了：

div.menuAdmin ul li：hover＆gt; ul li a：hover

必须：

div.menuAdmin ul li：hover＆gt; ul li：hover＆gt;一个

将鼠标悬停在li元素上可以保持效果，因为li子菜单是>的一部分。

检查演示http://jsfiddle.net/7rMgu/1/。

现在使用此>时的第二个问题;当你只想影响直接子节点时，它可以让你避免在嵌套元素上使用相同的样式。我已经修复了相同选择器的示例，如果您删除最后a检查发生了什么：

http://jsfiddle.net/7rMgu/3/

即使在某些嵌套元素中，它也会更改li中的所有{{1}}。

Answer 2

这是一个更新的小提琴：

http://jsfiddle.net/ryanwheale/7rMgu/2/

基本上，您始终希望:hover选择器位于LI上。你在A上有它。

此外，CSS中的>选择器意味着“直接孩子”......最好通过示例解释：

<div class="my-div">
    <p>This should be blue</p>

    <div>
        <p>This should be green</p>
    </div>
</div>

和这个css：

.my-div p { color: green }
.my-div > p { color: blue }

Answer 3

你有一些多余的规则，我试着把它归结为你：

.menuAdmin ul{ /* all lists */
    margin:0;
    padding:0;
    list-style: none;
}
.menuAdmin li { /* all list items */
    margin:0;
    padding:0;
}
.menuAdmin > ul { /* first level list*/
    float: right;
}
.menuAdmin > ul > li { /* first level list items*/
    float: left;
}
.menuAdmin ul ul { /* second and third level list */
    position: absolute; /* remove from flow */
    display: none; /* hide by default */
}
.menuAdmin ul ul ul { /* third level list */
    top: 0;
    left: 100%;
}
.menuAdmin li:hover > ul { /* first level list inside of a hovered item */
    display: block;
}
.menuAdmin a { /* all links */
    color:#fff;
    padding:0.1em 0.3em 0.2em 0.3em;
    text-decoration:none;
    font-size:12px;
    display:block;
    width:130px;
    background-color: #0d497d;
    border:1px solid #78B9EF;
    border-radius:5px;
}
.menuAdmin li:hover > a { /* links inside hovered list item */
    color:#000;
    background-color:#78B9EF;
}

如前所述，>表示“孩子”（a.k.a. direct descendant）

请参阅http://jsfiddle.net/7rMgu/5/

上的演示

3级css子菜单悬停状态

3 个答案: