如何在响应式Semantic UI垂直菜单小屏模式下将子菜单置于菜单项下方？

嘿，我之前也踩过Semantic UI响应式菜单的类似坑！你说的小屏上子菜单跑到屏幕外的问题，本质是Semantic UI默认的下拉菜单定位规则是为大屏侧边栏场景设计的，默认往右侧弹出，但小屏下菜单变成了全屏宽度，右侧根本没多余空间，自然就被挤出去了。咱们用几行CSS就能轻松解决：

第一步：给小屏添加专属定位样式 #

在你的样式表中加入这段媒体查询代码，专门针对小屏（比如宽度≤768px）调整下拉菜单的行为：

@media only screen and (max-width: 768px) {
  /* 让子菜单相对父菜单项定位，不再往右侧偏移 */
  .ui.vertical.menu .item .menu {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    border-left: none !important;
    box-shadow: none !important;
  }
}

关键属性的作用拆解： #

• position: relative !important：把默认的绝对定位改成相对定位，这样子菜单会乖乖紧跟在父菜单项下方，而不是相对于视窗乱跑。
• left: 0 !important：覆盖Semantic UI默认的右侧偏移值，确保子菜单和父菜单项左对齐。
• width: 100% !important：让子菜单和全屏菜单同宽，保持视觉上的一致性。
• 去掉border-left和box-shadow：小屏上不需要这些侧边栏风格的装饰，让样式更简洁统一。

第二步：（可选）给展开收起加平滑过渡 #

如果想让子菜单的展开收起更丝滑，可以再加这段CSS，配合Semantic UI自带的active类切换逻辑：

.ui.vertical.menu .item .menu {
  transition: max-height 0.3s ease;
  max-height: 0;
  overflow: hidden;
}

.ui.vertical.menu .item.active .menu {
  max-height: 500px; /* 数值可以根据你的子菜单实际高度调整 */
}

这样点击父菜单项时，子菜单会平滑展开/收起，而不是突然弹出，交互体验更好。

原理说明 #

Semantic UI的垂直菜单下拉默认是为大屏侧边栏场景设计的，所以会往右侧弹出展示子菜单。但小屏下菜单变成了全屏宽度，右侧没有多余空间，改成相对定位后，子菜单就会自然地在父菜单项下方展开，完美适配小屏的布局空间。

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