如何无JS实现仿微软官网的Bootstrap分栏垂直下拉菜单

基于Bootstrap 5原生组件框架，搭配少量自定义CSS即可实现目标效果，全程不需要编写任何JavaScript代码，交互、视觉完全对齐微软官网同类组件。

核心实现逻辑 #

• 复用Bootstrap原生dropdown基础DOM结构，减少冗余适配代码
• 采用CSS Grid实现规整的多列布局，列宽、列数可灵活配置
• 通过:focus-within伪类实现下拉菜单的显隐控制，完全替代JS交互逻辑
• 自定义菜单项hover态、分组标题样式、阴影圆角参数，匹配微软官网视觉
• 内置响应式规则，移动端自动切换为单列展示

核心CSS代码 #

/* 多列下拉菜单基础样式 */
.dropdown.multi-column .dropdown-menu {
  display: none;
  /* 配置3列固定宽度，可按需调整列数、列宽 */
  grid-template-columns: repeat(3, 220px);
  gap: 4px;
  padding: 16px;
  min-width: auto;
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
/* 无JS控制下拉显隐 */
.dropdown.multi-column:focus-within .dropdown-menu {
  display: grid;
}
/* 菜单项样式对齐微软官网效果 */
.dropdown.multi-column .dropdown-item {
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  color: #1a1a1a;
}
.dropdown.multi-column .dropdown-item:hover {
  background-color: #f3f3f3;
}
/* 分组标题样式 */
.dropdown.multi-column .dropdown-header {
  font-weight: 600;
  color: #1a1a1a;
  font-size: 14px;
  padding: 8px 12px 4px;
  margin: 0;
}
/* 响应式适配：移动端切换单列 */
@media (max-width: 767.98px) {
  .dropdown.multi-column .dropdown-menu {
    grid-template-columns: 1fr;
    width: calc(100vw - 24px);
    left: 12px !important;
    right: 12px !important;
  }
}

可直接复用的HTML结构 #

<!-- 仅需引入Bootstrap 5版本CSS文件，无需引入任何JS依赖 -->
<div class="dropdown multi-column">
  <button class="btn btn-light dropdown-toggle" type="button" tabindex="0">
    全部产品
  </button>
  <ul class="dropdown-menu">
    <!-- 第一列菜单 -->
    <li><h6 class="dropdown-header">生产力工具</h6></li>
    <li><a class="dropdown-item" href="#">文档编辑</a></li>
    <li><a class="dropdown-item" href="#">表格处理</a></li>
    <li><a class="dropdown-item" href="#">演示制作</a></li>
    <li><a class="dropdown-item" href="#">邮箱客户端</a></li>
    <li><a class="dropdown-item" href="#">云笔记</a></li>

    <!-- 第二列菜单 -->
    <li><h6 class="dropdown-header">云服务</h6></li>
    <li><a class="dropdown-item" href="#">云服务器</a></li>
    <li><a class="dropdown-item" href="#">对象存储</a></li>
    <li><a class="dropdown-item" href="#">云数据库</a></li>
    <li><a class="dropdown-item" href="#">CDN加速</a></li>
    <li><a class="dropdown-item" href="#">云安全</a></li>

    <!-- 第三列菜单 -->
    <li><h6 class="dropdown-header">开发者工具</h6></li>
    <li><a class="dropdown-item" href="#">代码编辑器</a></li>
    <li><a class="dropdown-item" href="#">版本管理</a></li>
    <li><a class="dropdown-item" href="#">持续集成</a></li>
    <li><a class="dropdown-item" href="#">自动化测试</a></li>
    <li><a class="dropdown-item" href="#">运维监控</a></li>
  </ul>
</div>

自定义调整说明 #

• 列配置：修改grid-template-columns的repeat()参数即可调整列数，比如要实现4列布局就改为repeat(4, 200px)，同时可自定义单列宽度
• 样式微调：可直接替换圆角、阴影、色值参数，1:1匹配目标站点的视觉规范
• 交互逻辑：点击菜单外区域会自动失焦关闭下拉，和原生JS实现的交互体验一致，按钮添加了tabindex属性支持键盘聚焦唤起，满足基础无障碍要求

参考效果 #

微软风格多列下拉菜单参考图

内容的提问来源于stack exchange，提问作者Phan Tuấn Dương