如何在列表菜单中的无序列表中创建无序列表？ [英] How to create an unordered list inside an unordered list in a list menu?

查看：126
本文介绍了如何在列表菜单中的无序列表中创建无序列表？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在我的页面上，我试图在我的菜单中的无序列表中创建一个无序列表，以便有第二个下拉菜单。问题是，第二个下拉菜单与第一个同时显示。



  .menu {border：none; border：0px; margin：0px; padding：0px;字体：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;保证金：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-重复;颜色：#cccccc;显示：块; 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;颜色：#FFFFFF; text-decoration：none;}。menu li ul {background：＃333333;显示：无;身高：自动; padding：0px; margin：0px; border：0px;位置：绝对; width：225px; z-index：200; / *顶部：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'）底部左侧无重复;显示：块; 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'）中间左边不重复; border：0px;颜色：#ffffff; text-decoration：none;} menu p {clear：left;}  

 < div class =menu> < UL> < li>< a href =/ search / label / game>游戏< / a> < ul id =1> < li>< a href =/ search / label / minecraft> minecraft< / a> < ul id =2> < li>< a href =/ search / label / Project>项目< / a> < /锂> < li>< a href =/ search / label / Texture Pack>贴图包< / a> < /锂> < li>< a href =/ search / label / Skin>外观< / a> < /锂> < li>< a href =/ search / label / Mod> Mods< / a> < /锂> < li>< a href =/ search / label / Other>其他资料< / a> < /锂> < / UL> < /锂> < / UL> < /锂> < / div>< / div>

解决方案

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


儿童组合器描述了两个元素之间的童年关系。一个子组合器由大于号（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：悬停> UL 。这将确保当用户将鼠标悬停在父节点 li 上时，仅显示直接子节点 ul 。

  • 更改 .menu li a：hover，.menu li ul li：将一个悬停到 .menu li ul li：悬停>一个。这将确保当用户将鼠标悬停在父节点 li 上时，只有直接子节点 a s被高亮显示。 >


.menu {border：none; border：0px; margin：0px; padding：0px;字体：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;保证金：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-重复;颜色：#cccccc;显示：块; 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;颜色：#FFFFFF; text-decoration：none;}。menu li ul {background：＃333333;显示：无;身高：自动; padding：0px; margin：0px; border：0px;位置：绝对; 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-重复;显示：块; 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> {背景：＃2580a2网址（'http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsZPiSwCMI/AAAAAAAAAGQ/VBSL8auDxzc/s1600/hover_sub.gif'）中央左侧无重复; border：0px;颜色：#ffffff; text-decoration：none;}

< div class = 菜单 > < UL> < li>< a href =/ search / label / game>游戏< / a> < ul id =1> < li>< a href =/ search / label / minecraft> minecraft< / a> < ul id =2> < li>< a href =/ search / label / Project>项目< / a> < /锂> < li>< a href =/ search / label / Texture Pack>贴图包< / a> < /锂> < li>< a href =/ search / label / Skin>外观< / a> < /锂> < li>< a href =/ search / label / Mod> Mods< / a> < /锂> < li>< a href =/ search / label / Other>其他资料< / a> < /锂> < / UL> < /锂> < / UL> < /锂> < / div>


On my page, I'm trying to create an unordered list within an unordered list in my menu so that there is a second dropdown menu. The problem is that the second dropdown menu displays at the same time as the first.

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

解决方案

The key to getting the sub-menu working is to use the child combinator (>) to target direct descendants.

A child combinator describes a childhood relationship between two elements. A child combinator is made of the "greater-than sign" (U+003E, >) character and separates two sequences of simple selectors.

(http://www.w3.org/TR/css3-selectors/#child-combinators)

The following changes are required:

  • Add the .menu li ul ul setting left: 100%; and top: 0;. This will tell all sub-menus to be positioned against the right edge of its parent menu.
  • Change .menu li:hover ul to .menu li:hover > ul. This will ensure that only the direct child ul is shown when the user hovers over the parent li.
  • Change .menu li ul a:hover, .menu li ul li:hover a to .menu li ul li:hover > a. This will ensure that only the direct child as are highlighted when the user hovers over the parent 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>

这篇关于如何在列表菜单中的无序列表中创建无序列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆