无需插件实现两列mega menu下拉及自定义代码方案咨询

没问题！完全可以不用插件搞定两列的mega menu，我平时做项目经常用这套纯HTML+CSS的方案，轻量又可控，甚至不需要JS就能实现基础功能，一起来看看：

先把基础的导航栏和mega菜单的结构写好，重点是把下拉部分拆成两个列容器：

<nav class="main-nav">
  <ul class="nav-list">
    <li class="nav-item">
      <a href="#">首页</a>
    </li>
    <li class="nav-item has-mega">
      <a href="#">产品中心</a>
      <!-- 两列mega菜单的容器 -->
      <div class="mega-menu">
        <div class="mega-column">
          <h4>数码产品</h4>
          <ul>
            <li><a href="#">手机</a></li>
            <li><a href="#">笔记本</a></li>
            <li><a href="#">耳机</a></li>
          </ul>
        </div>
        <div class="mega-column">
          <h4>家居用品</h4>
          <ul>
            <li><a href="#">沙发</a></li>
            <li><a href="#">灯具</a></li>
            <li><a href="#">收纳</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li class="nav-item">
      <a href="#">关于我们</a>
    </li>
  </ul>
</nav>

我用.has-mega标记需要触发mega菜单的导航项，里面的.mega-menu是下拉容器，两个.mega-column就是我们要的两列布局单元。

接下来写核心样式，用Flex布局轻松实现两列，同时处理hover显示下拉的逻辑：

/* 基础导航栏样式 */
.main-nav {
  background: #333;
  padding: 0 20px;
}
.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 30px;
}
.nav-item a {
  display: block;
  color: white;
  text-decoration: none;
  padding: 15px 0;
}

/* Mega Menu核心样式 */
.has-mega {
  position: relative; /* 让下拉菜单相对于这个导航项定位 */
}
.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: 20px;
  width: 400px; /* 可以根据需求调整菜单宽度 */
  display: none; /* 默认隐藏菜单 */
  gap: 40px;
  flex-direction: row; /* 横向排列列元素 */
}
/* 鼠标悬停导航项时显示mega菜单 */
.has-mega:hover .mega-menu {
  display: flex;
}

/* 列样式 */
.mega-column {
  flex: 1; /* 让两个列自动平分容器宽度 */
}
.mega-column h4 {
  margin-top: 0;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}
.mega-column ul {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}
.mega-column ul li a {
  color: #666;
  padding: 8px 0;
}
.mega-column ul li a:hover {
  color: #333;
}

这套代码里，flex:1保证两列宽度均等，hover触发显示的逻辑完全靠CSS实现，没有任何外部依赖。

如果想要更丝滑的显示体验，可以把display属性换成opacity和visibility，配合CSS过渡动画：

.mega-menu {
  /* 替换原来的display:none */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.has-mega:hover .mega-menu {
  /* 替换原来的display:flex */
  opacity: 1;
  visibility: visible;
}

这样hover的时候菜单会有淡入效果，比直接显示更自然。

这套方案完全不需要任何插件，所有代码都是自定义的，你可以随时调整宽度、颜色、列数（比如要三列就多添加一个.mega-column），灵活性拉满。

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