css二级下拉列表怎么做

CSS二级下拉列表是网页设计中的常用元素，下面介绍如何实现。

// HTML结构示例
<div class="dropdown">
  <button class="dropbtn">下拉列表</button>
  <div class="dropdown-content">
    <a href="#">选项1</a>
    <a href="#">选项2</a>
    <div class="dropdown">
      <button class="dropbtn">二级选项</button>
      <div class="dropdown-content">
        <a href="#">选项1.1</a>
        <a href="#">选项1.2</a>
      </div>
    </div>
  </div>
</div>

首先，通过设置dropdown类div的position属性为relative，使其成为所有子元素的参考对象。

/* CSS样式 */
.dropdown {
  position: relative;
}

接着，设置下拉列表按钮dropbtn和下拉列表内容dropdown-content的属性。

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 14px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown:hover .dropdown-content {
  display: block;
}

其中，dropdown-content的position属性设置为absolute，使其相对于参考对象dropdown进行定位。

最后，实现二级下拉列表的关键是将子下拉列表的dropdown类div嵌套在父下拉列表的dropdown-content类div中，通过设置a标签hover事件触发下一级下拉列表。

.dropdown:hover .dropdown-content .dropdown:hover .dropdown-content {
  display: block;
}

在父下拉列表的mouseenter事件和子下拉列表的mouseleave事件中需添加stopPropagation()，以防止事件冒泡而触发父下拉列表的hover效果。

$('.dropdown').mouseenter(function(event) {
  event.stopPropagation();
});
$('.dropdown-content').mouseleave(function(event) {
  event.stopPropagation();
});

至此，CSS二级下拉列表实现完毕。