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/