CSS菜单样式问题：基于Vue.js实现水平菜单与选中项下划线

• 核心问题原因：当前二级菜单的折叠容器默认是块级纵向堆叠布局，单个菜单项宽度占满父容器，导致菜单竖排展示
• 具体样式调整：
  1. 覆盖折叠容器的默认块级样式，设置横向不换行flex布局，适配移动端横向滚动效果

     /* 适配b-collapse组件的默认样式覆盖 */
     #accordion-mbl-menu .b-collapse {
       display: flex !important;
       flex-wrap: nowrap;
       overflow-x: auto;
       gap: 12px;
       padding: 12px 0;
       scrollbar-width: none;
     }
     /* 隐藏移动端webkit内核的滚动条，保持界面整洁 */
     #accordion-mbl-menu .b-collapse::-webkit-scrollbar {
       display: none;
     }
     

  2. 调整单个菜单项的尺寸，取消默认占满父容器的宽度设置

     #accordion-mbl-menu .grid-item.parent-lvl-2 {
       flex-shrink: 0;
       width: auto;
     }
     #accordion-mbl-menu .grid-sty-1 {
       height: auto;
       width: fit-content;
       padding: 8px 4px;
     }
     

• 核心实现逻辑：结合Vue响应式状态给选中项绑定激活类名，通过CSS伪元素实现位置可控的下划线效果
• 具体步骤：
  1. 在组件中定义激活菜单的状态值，绑定点击事件更新选中标记

     export default {
       data() {
         return {
           activeMenuId: null
         }
       },
       methods: {
         onMenuItemClick(e) {
           this.activeMenuId = e.currentTarget.dataset.menuItemId
         }
       }
     }
     

  2. 模板中给菜单项a标签绑定动态激活类

     <a 
       class="link -1 grid-sty-1"
       :class="{ 'menu-active': activeMenuId === '473' }"
       href="#"
       target="_self"
       data-menu-item-id="473"
       @click="onMenuItemClick"
     >
       <span class="text">GTI</span>
     </a>
     

  3. 编写选中状态的下划线样式

     #accordion-mbl-menu .grid-sty-1 {
       position: relative;
     }
     /* 未选中状态默认隐藏下划线，带过渡动画 */
     #accordion-mbl-menu .grid-sty-1::after {
       content: '';
       position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
       height: 2px;
       background: #001E50;
       transform: scaleX(0);
       transition: transform 0.2s ease;
     }
     /* 选中状态显示下划线 */
     #accordion-mbl-menu .grid-sty-1.menu-active::after {
       transform: scaleX(1);
     }
     

• BootstrapVue的b-collapse组件默认展开时会给容器设置display: block样式，不强制覆盖的话flex布局不会生效，必须给容器的flex声明加!important
• 菜单横向排布时不要开启flex-wrap: wrap，否则菜单项会自动折行，达不到水平展示的效果
• 下划线如果和文字的间距不合适，直接调整bottom值即可，比如设置为bottom: -4px，就能匹配常见设计的下划线位置
• 所有新增的自定义样式，都要放在你现有代码的@media (max-width: 828px)媒体查询块内部，避免影响桌面端的原有菜单布局

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