CSS实现多列相邻布局的导航栏悬浮下拉菜单

• 需要实现购物网站风格的多列下拉导航菜单：鼠标悬浮在导航栏目标元素上时，展示对齐排列的相邻多列下拉内容，交互与视觉效果匹配主流商用站点的导航下拉逻辑。
• 目前已掌握单列悬浮下拉菜单的实现方法，曾尝试浮动布局实现多列下拉，但效果无法满足项目需求；前后花费两天时间查阅资料、测试多种实现方案，始终未达到预期效果。
• 原有实现的核心代码附在下方，可直接复现问题。

原有代码存在4个直接导致效果失效的问题：

1. HTML语法错误：class属性值里多写了CSS选择器专用的.，<div class=".the-drop">这段代码会让CSS根本匹配不到下拉容器，所有下拉相关的样式都不生效。
2. 显示逻辑冲突：给下拉容器.the-drop设置了display:none，又给它的两个子列表.drop-1-list、.drop-2-list也设置了display:none，但悬浮规则只改了父级.the-drop的显示状态，子列表始终保持隐藏。
3. CSS Grid语法错误：grid-area的属性值不需要加引号，原有代码写的grid-area: "drop-1-list"是无效值，浏览器识别不了布局规则。
4. 交互与定位缺陷：下拉容器用了绝对定位但父级没设置相对定位，会导致下拉面板错位；悬浮触发绑定在内部子元素上，鼠标从导航文字移到下拉面板的过程中会触发下拉意外关闭，体验不符合商用站点标准。

CSS代码 #

.nav-list {
  list-style: none;
  border: 1px solid blue;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
  color: white;
  background-color: #429CD9;
  margin: 0;
  padding: 0;
}

.nav-list li {
  padding: 12px 16px;
  cursor: pointer;
}

/* 下拉触发项设为相对定位，作为下拉面板的定位基准，防止错位 */
.to-hire {
  position: relative;
}

.the-drop {
  display: none;
  /* 下拉面板固定贴在导航项底部左对齐 */
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 480px;
  background: #fff;
  border: 1px solid #eee;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* 悬浮在整个导航项上时触发下拉，避免鼠标移动到下拉区域时面板关闭 */
.to-hire:hover .the-drop {
  display: grid;
  grid-template-areas: "drop-1-list drop-2-list";
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 20px;
}

.drop-1-list {
  grid-area: drop-1-list;
}

.drop-2-list {
  grid-area: drop-2-list;
}

.drop-1-list,
.drop-2-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.drop-1-list li a,
.drop-2-list li a {
  display: block;
  padding: 6px 0;
  color: #333;
  text-decoration: none;
}

.drop-1-list li a:hover,
.drop-2-list li a:hover {
  color: #429CD9;
}

HTML代码 #

<nav>
  <ul class="nav-list">
    <li>Nothing</li>
    <li class="to-hire">
      <div id="hire-dropdown">To Hire
        <div class="the-drop">
          <ul class="drop-1-list">
            <li><a href="#">Access</a></li>
            <li><a href="#">Breaking</a></li>
            <li><a href="#">Compaction</a></li>
            <li><a href="#">Cooling</a></li>
            <li><a href="#">Drilling</a></li>
            <li><a href="#">Lifting</a></li>
            <li><a href="#">Sanding</a></li>
            <li><a href="#">Sawing</a></li>
          </ul>
          <ul class="drop-2-list">
            <li><a href="#">Product 1</a></li>
            <li><a href="#">Product 2</a></li>
            <li><a href="#">Product 3</a></li>
            <li><a href="#">Product 4</a></li>
            <li><a href="#">Product 5</a></li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
</nav>

• 这套Grid实现的多列下拉比浮动方案维护成本低很多，如果需要加第三列、第四列，只需要修改grid-template-columns的宽度配置，新增对应列的grid-area绑定即可，不需要清除浮动、也不会出现高度塌陷问题。
• 如果需要加下拉的展开动画，可以给.the-drop加opacity、transform的过渡效果，配合visibility属性替代display:none实现平滑展开，不会影响布局稳定性。

内容的提问来源于stack exchange，提问作者charlesumesi