3级css子菜单悬停状态

Question

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

正如您所看到的，我的辅助级别在第三级导航时不保留浅蓝色背景。我已经浏览了类似的线程的网站，但我只发现只有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李：悬停> UL立一个：悬停

必须是：

div.menuAdmin UL李：悬停> UL李：悬停>一个

随着悬停在李元素保持效果，因为ul这是子菜单是li的一部分。

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

现在你的第二个问题是什么时候使用这个>;当你只想影响直接的孩子时，它可以让你在嵌套元素上避免相同的风格。用相同的选择我有修复功能，如果你删除最后>检查发生什么一个例子：

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

它改变了所有a即使是里面的一些嵌套元素的李内。

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; 
} 

前面已经回答了，>的意思是“孩子”（又名嫡系）

见演示在http://jsfiddle.net/7rMgu/5/