当前位置: 动力学知识库 > 问答 > 编程问答 >

html - how to select the nested list?

问题描述:

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

How to select nested listhere to apply specific operations on them i want to display the nested list in blocks and parent list as inline?

EDIT

Sorry i made a mistake i donot want to use classes for list items and wanna do with only #drop

网友答案:

To select main list: #drop > ul

To select child list: #drop > ul > ul

Note that you cannot have duplicate ids on the same page.

I suggest you nest the child ul inside the parent li this way. This makes it easier to style the drop down. The selector will be #drop > ul > li > ul in this case.

#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;
}
<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>
分享给朋友:
您可能感兴趣的文章:
随机阅读: