html - 3级CSS子菜单悬停状态

Question

我有一个 3 级的 CSS 菜单。你可以在这里看到我的实际代码 http://jsfiddle.net/7rMgu/

如您所见，在第 3 层导航时，我的二级层没有保持浅蓝色背景。我在网站上查看了类似的线程，但我只发现了只有 2 个级别的类似问题。另外，有人可以解释一下我什么时候应该在 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 标签，因此您有这个:

div.menuAdmin ul li:hover > ul li a:hover

必须是:

div.menuAdmin ul li:hover > ul li:hover > a

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

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

现在你的第二个问题是使用这个>；当您只想影响直接子级时，它可以让您避免在嵌套元素上使用相同的样式。一个与我修复的相同选择器的示例，如果您删除最后一个 > 检查会发生什么:

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

即使在一些嵌套元素中，它也会更改 li 中的所有 a。