菜单多列批处理 - CSS

在网站设计中，经常需要创建多级菜单，而通常只需要使用CSS即可完成。但是，在某些情况下，可能需要将菜单划分为多列，以更好地适应页面布局。本教程将展示如何使用CSS来创建一个可编辑的多列菜单。

HTML

为了在CSS中创建菜单，首先需要定义HTML标记。以下是一个示例菜单：

<ul class="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a>
    <ul>
      <li><a href="#">Our History</a></li>
      <li><a href="#">Our Team</a></li>
      <li><a href="#">Press</a></li>
    </ul>
  </li>
  <li><a href="#">Services</a>
    <ul>
      <li><a href="#">Web Design</a></li>
      <li><a href="#">Web Development</a></li>
      <li><a href="#">SEO</a></li>
    </ul>
  </li>
  <li><a href="#">Portfolio</a>
    <ul>
      <li><a href="#">Web Design</a></li>
      <li><a href="#">Web Development</a></li>
      <li><a href="#">SEO</a></li>
    </ul>
  </li>
  <li><a href="#">Contact Us</a></li>
</ul>

CSS

接下来，我们需要使用CSS来创建多列菜单。

.menu {
  width: 100%;
  display: flex;
  flex-wrap: wrap; /* wrap items onto new lines when necessary */
}
.menu > li {
  width: 33.33%; /* three columns */
  display: inline-block;
  vertical-align: top;
  text-align: center;
  position: relative;
}
.menu > li:first-child {
  margin-left: 0; /* remove the margin from the first item */
}
.menu ul {
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 1;
  opacity: 0; /* hide the submenu */
  visibility: hidden;
  transition: all 0.3s ease; /* add a transition */
}
.menu ul li {
  width: 50%;
  text-align: left;
}
.menu li:hover ul {
  opacity: 1; /* show the submenu on hover */
  visibility: visible;
}

解释

首先，我们将菜单的宽度设置为100%，并使用flex布局使菜单项水平排列。

接下来，我们将每个菜单项的宽度设置为33.33%（三列），并使用display:inline-block;和vertical-align:top;属性使菜单项垂直对齐，以便在多列布局中正确对齐。

对于ul子菜单，我们使用position:absolute;将其定位在li菜单项下方，并使用display:flex;和flex-wrap:wrap;属性在多列布局中自动换行。

我们还将submenu的opacity和visibility设置为0，以便在未悬停时隐藏子菜单。使用:hover伪类选择符，当鼠标悬停在父菜单项上时，我们将子菜单的不透明度和可见性设置为1，以显示子菜单。

结论

使用这种方法，您可以轻松地创建自适应，多列菜单，适应您的网站布局。此外，您还可以对紧密排列的菜单项进行微调，以获得最佳的视觉效果。