如何使用HTML和CSS实现带子菜单的响应式右拉菜单

原有代码核心问题 #

1. CSS多列布局的容器默认会裁剪超出容器范围的绝对定位子元素，导致子菜单显示异常
2. 子菜单未配置定位偏移，默认展示在父菜单项左下方，无法实现右拉效果

修改后可运行代码 #

HTML代码

<ul class="main-menu">
  <li>
    <a href="#">Category ></a>
    <ul class="sub-menu">
      <li>Sub-menu 1</li>
      <li>Sub-menu 2</li>
      <li>Sub-menu 3</li>
    </ul>
  </li>
  <li><a href="#">Category 2 ></a></li>
  <li><a href="#">Category 3 ></a></li>
  <li><a href="#">Category 4 ></a></li>
  <li><a href="#">Category 5 ></a></li>
</ul>

CSS代码

/* 外层主菜单多列布局 */
.main-menu {
  column-count: 4;
  column-gap: 60px;
  column-rule: 1px solid black;
  overflow: visible; /* 核心修改：避免多列容器裁剪绝对定位子元素 */
  padding: 0;
}

.main-menu li {
  list-style: none;
  position: relative;
  padding: 4px 8px;
  width: fit-content; /* 缩小hover触发范围，避免误触发 */
}

.main-menu li a {
  text-decoration: none;
  color: red;
}

/* 子菜单样式 */
.sub-menu {
  display: none;
  position: absolute;
  left: 100%; /* 右拉到父元素右侧 */
  top: 0; /* 和父元素顶部对齐 */
  min-width: 120px;
  padding-left: 20px;
  margin: 0;
}

/* hover触发展示 */
.main-menu li:hover .sub-menu {
  display: block;
}

/* 响应式适配：窄屏自动减少列数 */
@media (max-width: 992px) {
  .main-menu {
    column-count: 2;
  }
}

@media (max-width: 576px) {
  .main-menu {
    column-count: 1;
  }
}

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