如何在列表菜单中的无序列表中创建无序列表？

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

使子菜单工作的关键是使用子组合器（>）来定位直接后代。

  

儿童组合子描述了两个元素之间的童年关系。子组合子由“大于号”（U + 003E，＆gt;）字符组成，并分隔两个简单选择器序列。

（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。这将确保当用户将鼠标悬停在父ul上时，只显示直接子li。
• 将.menu li ul a:hover, .menu li ul li:hover a更改为.menu li ul li:hover > a。这将确保当用户将鼠标悬停在父a上时，仅突出显示直接子li。

.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>