修改父菜单子菜单展示样式：将面板式子菜单改为父菜单下方普通菜单

我帮你调整了代码，把原来的全屏侧边面板子菜单改成了在Menu 2上方展示的普通下拉菜单，核心是修改CSS定位逻辑和优化交互逻辑，以下是完整的实现：

修改后的HTML #

可以保留原结构，移除不必要的menu-header让菜单更简洁：

<nav class="main-sidebar">
 <div class="sidebar-wrapper">
 <ul class="sidebar-menu">
 <li class="menuitem-dashboard active">
 <a href="#" title="Dashboard">
 <i class="icon"></i>
 <span class="title">Menu 1</span>
 </a>
 </li>
 <li class="treeview menuitem-sales after">
 <span>
 <i class="icon"></i>
 <span class="title">Menu 2</span>
 </span>
 <div class="tree-menu-wrapper">
 <ul class="tree-menu">
 <li class="menuitem-order">
 <a href="#">
 <i class="icon"></i>
 <span class="name">Sub menu 1</span>
 </a>
 </li>
 <li class="menuitem-subscription">
 <a href="#" title="Subscription">
 <i class="icon"></i>
 <span class="name">Sub menu 2</span>
 </a>
 </li>
 </ul>
 </div>
 </li>
 <li class="menuitem-dashboard active">
 <a href="#" title="Dashboard">
 <i class="icon"></i>
 <span class="title">Menu 3</span>
 </a>
 </li>
 </ul>
 </div>
</nav>

修改后的CSS #

重点调整了子菜单的定位方式，从全屏fixed改成相对父菜单的absolute定位，同时优化了动画和样式：

/* 父菜单设置相对定位，作为子菜单的定位基准 */
li.treeview {
  position: relative;
}

/* 子菜单容器样式 */
li .tree-menu-wrapper {
  position: absolute;
  display: block;
  /* 定位在父菜单上方，要下方的话改成top:100% */
  bottom: 100%;
  left: 0;
  padding: 0.5rem 0;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  width: 200px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  background-color: var(--bs-menu-alt-bg, #ffffff);
  /* 平滑过渡动画 */
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  transform: translateY(-10px);
}

/* 显示子菜单的状态 */
li.show .tree-menu-wrapper {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

/* 子菜单列表样式 */
li .tree-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 子菜单项样式 */
li .tree-menu li {
  background-color: var(--bs-menu-alt-bg, #ffffff);
}

li .tree-menu a {
  padding: 0.75rem 1rem;
  display: block;
  text-decoration: none;
  color: var(--bs-secondary, #707880);
  transition: background-color 0.2s ease;
}

li .tree-menu a:hover, li .tree-menu li:hover {
  background-color: rgba(0,0,0,0.05);
  color: var(--bs-secondary-light, #9098a0);
}

li .tree-menu li.active > a {
  border-left: 3px solid var(--bs-secondary-light, #9098a0);
  background-color: rgba(0,0,0,0.03);
}

/* 保留RTL支持（如果需要） */
[dir="rtl"] li .tree-menu-wrapper {
  left: auto;
  right: 0;
}

[dir="rtl"] li .tree-menu li.active > a {
  border-right: 3px solid var(--bs-secondary-light, #9098a0);
  border-left: 0;
}

修改后的JavaScript #

优化了交互逻辑，支持点击父菜单切换子菜单显示/隐藏，点击页面其他地方自动关闭，避免多个菜单同时打开：

// 获取所有带子菜单的父项
const treeviewItems = document.querySelectorAll("li.treeview");

// 给每个父菜单添加点击事件
treeviewItems.forEach(item => {
  item.addEventListener("click", function(ev) {
    ev.stopPropagation();
    // 切换当前菜单的显示状态
    this.classList.toggle("show");
    
    // 关闭其他已打开的子菜单
    treeviewItems.forEach(otherItem => {
      if (otherItem !== this) {
        otherItem.classList.remove("show");
      }
    });
  });
});

// 点击页面空白处关闭所有子菜单
document.addEventListener("click", () => {
  treeviewItems.forEach(item => item.classList.remove("show"));
});

// 点击子菜单内部时不关闭菜单
document.querySelectorAll(".tree-menu-wrapper").forEach(wrapper => {
  wrapper.addEventListener("click", ev => ev.stopPropagation());
});

关键修改点说明 #

1. 定位逻辑改变：把原来的全屏fixed面板改成了相对于父菜单的absolute定位，通过bottom:100%放在父菜单上方，你如果想放在下方，只需要把bottom:100%改成top:100%即可。
2. 交互优化：新增了点击空白处关闭菜单、切换菜单时自动关闭其他菜单的逻辑，提升了用户体验。
3. 样式简化：移除了原来面板的全屏相关样式，调整了子菜单项的hover效果和padding，更贴近普通下拉菜单的样式。

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