如何在列表菜單中的無序列表中創建無序列表？

Question

在我的頁面上，我正嘗試在我的菜單中的無序列表中創建一個無序列表，以便有第二個下拉菜單。問題是第二個下拉菜單與第一個同時顯示。

.menu { 
 
    border: none; 
 
    border: 0px; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    font: 67.5%"Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
} 
 
.menu ul { 
 
    background: #333333; 
 
    height: 35px; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.menu li { 
 
    float: left; 
 
    padding: 0px; 
 
} 
 
.menu li a { 
 
    background: #333333 url("http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsZSeQYKQI/AAAAAAAAAGU/0AgHYW2zktQ/s1600/seperator.gif") bottom right no-repeat; 
 
    color: #cccccc; 
 
    display: block; 
 
    font-weight: normal; 
 
    line-height: 35px; 
 
    margin: 0px; 
 
    padding: 0px 25px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
} 
 
.menu li a:hover, 
 
.menu ul li:hover a { 
 
    background: #2580a2 url("http://3.bp.blogspot.com/_jM8-wHc3NKY/TQsZNT36uyI/AAAAAAAAAGM/F8t08m7-5tw/s1600/hover.gif") bottom center no-repeat; 
 
    color: #FFFFFF; 
 
    text-decoration: none; 
 
} 
 
.menu li ul { 
 
    background: #333333; 
 
    display: none; 
 
    height: auto; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    border: 0px; 
 
    position: absolute; 
 
    width: 225px; 
 
    z-index: 200; 
 
    /*top:1em; 
 
    /*left:0;*/ 
 
} 
 
.menu li:hover ul { 
 
    display: block; 
 
} 
 
.menu li li { 
 
    background: url('http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsZUcZYwkI/AAAAAAAAAGY/zNSlkfCsai8/s1600/sub_sep.gif') bottom left no-repeat; 
 
    display: block; 
 
    float: none; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    width: 225px; 
 
} 
 
.menu li:hover li a { 
 
    background: none; 
 
} 
 
.menu li ul a { 
 
    display: block; 
 
    height: 35px; 
 
    font-size: 12px; 
 
    font-style: normal; 
 
    margin: 0px; 
 
    padding: 0px 10px 0px 15px; 
 
    text-align: left; 
 
} 
 
.menu li ul a:hover, 
 
.menu li ul li:hover a { 
 
    background: #2580a2 url('http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsZPiSwCMI/AAAAAAAAAGQ/VBSL8auDxzc/s1600/hover_sub.gif') center left no-repeat; 
 
    border: 0px; 
 
    color: #ffffff; 
 
    text-decoration: none; 
 
} 
 
.menu p { 
 
    clear: left; 
 
}

<div class="menu"> 
 
    <ul> 
 
    <li><a href="/search/label/game">Games</a> 
 
     <ul id="1"> 
 
     <li><a href="/search/label/minecraft">minecraft</a> 
 
      <ul id="2"> 
 
      <li><a href="/search/label/Project">Projects</a> 
 
      </li> 
 
      <li><a href="/search/label/Texture Pack">Texture Packs</a> 
 
      </li> 
 
      <li><a href="/search/label/Skin">Skins</a> 
 
      </li> 
 
      <li><a href="/search/label/Mod">Mods</a> 
 
      </li> 
 
      <li><a href="/search/label/Other">Other Stuff</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

以獲得子菜單的工作，關鍵是要使用子組合子（>）爲目標的直接後裔。

A 孩子組合子描述了兩個元素之間的童年關係。子組合器由「大於號」（U + 003E，>）字符組成，並將兩個簡單選擇器序列分開。

（http://www.w3.org/TR/css3-selectors/#child-combinators）

需要以下改變：

• 添加.menu li ul ul設置left: 100%;和top: 0;。這將告訴所有的子菜單被定位在其父菜單的右邊緣。
• 更改.menu li:hover ul至.menu li:hover > ul。這將確保當用戶懸停在父母li上時，只顯示直接子女ul。
• 將.menu li ul a:hover, .menu li ul li:hover a更改爲.menu li ul li:hover > a。這將確保當用戶懸停在父母li上時，只有直接子女a被突出顯示。

.menu { 
 
    border: none; 
 
    border: 0px; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    font: 67.5%"Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
} 
 
.menu ul { 
 
    background: #333333; 
 
    height: 35px; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.menu li { 
 
    float: left; 
 
    padding: 0px; 
 
} 
 
.menu li a { 
 
    background: #333333 url("http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsZSeQYKQI/AAAAAAAAAGU/0AgHYW2zktQ/s1600/seperator.gif") bottom right no-repeat; 
 
    color: #cccccc; 
 
    display: block; 
 
    font-weight: normal; 
 
    line-height: 35px; 
 
    margin: 0px; 
 
    padding: 0px 25px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
} 
 
.menu li a:hover, 
 
.menu ul li:hover a { 
 
    background: #2580a2 url("http://3.bp.blogspot.com/_jM8-wHc3NKY/TQsZNT36uyI/AAAAAAAAAGM/F8t08m7-5tw/s1600/hover.gif") bottom center no-repeat; 
 
    color: #FFFFFF; 
 
    text-decoration: none; 
 
} 
 
.menu li ul { 
 
    background: #333333; 
 
    display: none; 
 
    height: auto; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    border: 0px; 
 
    position: absolute; 
 
    width: 225px; 
 
    z-index: 200; 
 
} 
 
.menu li ul ul { 
 
    top: 0; 
 
    left: 100%; 
 
} 
 
.menu li:hover > ul { 
 
    display: block; 
 
} 
 
.menu li li { 
 
    background: url('http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsZUcZYwkI/AAAAAAAAAGY/zNSlkfCsai8/s1600/sub_sep.gif') bottom left no-repeat; 
 
    display: block; 
 
    float: none; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    width: 225px; 
 
} 
 
.menu li:hover li a { 
 
    background: none; 
 
} 
 
.menu li ul a { 
 
    display: block; 
 
    height: 35px; 
 
    font-size: 12px; 
 
    font-style: normal; 
 
    margin: 0px; 
 
    padding: 0px 10px 0px 15px; 
 
    text-align: left; 
 
} 
 
.menu li ul li:hover > a { 
 
    background: #2580a2 url('http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsZPiSwCMI/AAAAAAAAAGQ/VBSL8auDxzc/s1600/hover_sub.gif') center left no-repeat; 
 
    border: 0px; 
 
    color: #ffffff; 
 
    text-decoration: none; 
 
}

<div class="menu"> 
 
    <ul> 
 
    <li><a href="/search/label/game">Games</a> 
 
     <ul id="1"> 
 
     <li><a href="/search/label/minecraft">minecraft</a> 
 
      <ul id="2"> 
 
      <li><a href="/search/label/Project">Projects</a> 
 
      </li> 
 
      <li><a href="/search/label/Texture Pack">Texture Packs</a> 
 
      </li> 
 
      <li><a href="/search/label/Skin">Skins</a> 
 
      </li> 
 
      <li><a href="/search/label/Mod">Mods</a> 
 
      </li> 
 
      <li><a href="/search/label/Other">Other Stuff</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>