Question

    <div id="drop">
        <ul>
            <li><a href="#">Home</a></li>
            <ul>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>           
            </ul>

            <li><a href="#">About</a></li>
            <ul>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>           
            </ul>

            <li><a href="#">Contact</a></li>
            <ul>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>           
            </ul>
        </ul>
    </div>

如何选择嵌套列表以对它们应用特定操作我想在块中显示嵌套列表并将父列表显示为内联？

EDIT 抱歉，我犯了一个错误，我不想使用列表项的类，只想做#drop

Answer 1

选择主列表：#drop > ul

选择子列表：#drop > ul > ul

请注意，您不能在同一页面上显示重复的ID。

我建议您以这种方式将孩子ul嵌套在父li内。这样可以更轻松地设置下拉样式。在这种情况下，选择器将为#drop > ul > li > ul。

＆＃13;

#drop a {
  text-decoration: none;
}
#drop li:hover > a {
  background: #000;
  color: #fff;
}
#drop > ul {
  display: inline-block;
}
#drop > ul > li {
  display: inline-block;
  position: relative;
}
#drop > ul > li > ul {
  display: none;
  position: absolute;
  left: 0;
  padding: 10px 0;
}
#drop > ul > li:hover > ul {
  display: block;
}
#drop > ul > li > ul > li {
  display: block;
}

＆＃13;

<div id="drop">
  <ul>
    <li><a href="#">Home</a>
      <ul>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>           
      </ul>
    </li>
    
    <li><a href="#">Link 2</a>
      <ul>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>          
      </ul>
    </li>
    
    <li><a href="#">Link 3</a>
      <ul>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>         
      </ul>
    </li>
  </ul>
</div>

＆＃13;

如何选择嵌套列表？

1 个答案: