如何调整简易下拉菜单子菜单定位，使其首项与主菜单首项等高？

原始代码 #

HTML结构 #

<ul id="top-menu">
  <li>something
    <ul>
      <li>somethingelse1</li>
      <li>somethingelse2</li>
    </ul>
  </li>
  <li> ... etc.</li>
</ul>

CSS样式 #

#top-menu ul {
  display: none;
}

#top-menu li:hover>ul {
  display: block;
}

#top-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

#top-menu>li {
  position: relative;
  padding: 10px;
  cursor: pointer;
}

#top-menu>li>ul {
  position: absolute;
  top: 0;
  left: 25%;
  list-style: none;
  background-color: #fff;
  padding: 0;
  margin: 0;
  z-index: 1000;
  min-width: 150px;
}

#top-menu>li>ul>li {
  padding: 10px;
  background-color: #ffffff;
  cursor: pointer;
}

#top-menu>li>ul>li>ul {
  position: absolute;
  top: 0;
  left: 25%;
  list-style: none;
  background-color: #fff;
  padding: 0;
  margin: 0;
  z-index: 1000;
}

当前问题 #

悬停主菜单项时，子菜单首项仅与当前父菜单项顶部对齐，无法实现所有子菜单首项都和主菜单首项保持同一高度。

修改方案 #

核心是改变二级菜单的定位基准，从单个主菜单项改为整个主菜单容器：

1. 移除主菜单项的相对定位属性
2. 保持二级菜单的top: 0，使其基于主菜单容器顶部对齐

修改后的关键CSS代码：

#top-menu>li {
  /* 移除 position: relative，取消当前菜单项的定位基准作用 */
  padding: 10px;
  cursor: pointer;
}

#top-menu>li>ul {
  position: absolute;
  top: 0; /* 基于最外层#top-menu的顶部对齐 */
  left: 25%;
  /* 其余属性保持不变 */
}

原理说明 #

原来的二级菜单以设置了position: relative的单个主菜单项为定位基准，top: 0会对齐当前菜单项的顶部。移除主菜单项的相对定位后，二级菜单会继承最外层#top-menu（已设置position: relative）作为定位基准，此时top: 0就会对齐主菜单的顶部，无论悬停哪个主菜单项，子菜单首项都会和主菜单首项保持同一高度。

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