css下拉菜单双排怎么做

CSS下拉菜单是网页中常见的交互方式，下拉菜单双排则是在有限的页面空间内实现更多选项的好方法。下面是一个简单的示例，演示如何用CSS构建下拉菜单双排。

/*CSS代码*/
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown:hover .dropdown-menu {
  display: block;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  z-index: 1000;
}
.dropdown-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dropdown-menu .dropdown-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.dropdown-menu .dropdown-inner li {
  flex-basis: 49%;
}
.dropdown-menu .dropdown-inner li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}
.dropdown-menu .dropdown-inner li a:hover {
  background-color: #f5f5f5;
  color: #000;
} 

在HTML中，我们需要创建一个包含下拉菜单的容器，然后在其内部插入一个带有下拉内容的列表。

<!--HTML代码-->
<div class="dropdown">
  <a href="#">下拉菜单</a>
  <div class="dropdown-menu">
    <div class="dropdown-inner">
      <ul>
        <li><a href="#">选项一</a></li>
        <li><a href="#">选项二</a></li>
        <li><a href="#">选项三</a></li>
      </ul>
      <ul>
        <li><a href="#">选项四</a></li>
        <li><a href="#">选项五</a></li>
        <li><a href="#">选项六</a></li>
      </ul>
    </div>
  </div>
</div> 

到这里，我们已经完成了下拉菜单双排的构建。通过CSS中的flexbox布局和媒体查询，我们可以使得菜单在响应式布局下也能自适应。我们只需在CSS中设置好相应的样式就可以了。

总的来说，下拉菜单双排的实现方法并不难，在HTML结构和CSS样式上的调整可以使得它完美地适应我们的需求，给用户带来更好的使用体验。