垂直下拉子菜单不水平对齐答案

【问题标题】：Vertical dropdown submenu does not align horizontally垂直下拉子菜单不水平对齐
【发布时间】：2022-11-26 12:10:19
【问题描述】：

多年来我一直在复制和粘贴我的下拉菜单，但没有完全理解它们背后的功能。我决定用最少的代码从头开始。基础知识在那里，但我无法弄清楚如何水平对齐下拉列表。我已经查看了此处发布的数十个示例，但我遗漏了一些东西。

目前：

欲望：

样本：

* { font-family: verdana; }
li { list-style: none; padding: 4px 0;  border: 1px solid green; }
a { text-decoration: none; }
ul li a { color: blue; }
ul li ul li a { color: red; }
ul li a:hover { opacity: 0.3; }

/*--------------
 Salient code
----------------*/

ul li {
  float: left; /* horizontal */
  width: 120px;
  position: relative;
}

ul li:hover ul {
  left: auto;
}

ul li ul {
  position: absolute;
  left: -999em;
  top: 28px;
  padding-left: 0; /* added per answer by Adam */
}

<ul>
    <li><a href="#">Top One</a></li>
    <li><a href="#">Top Two</a></li>
    <li><a href="#">Top Three</a>
    <ul>
        <li><a href="#">Middle One</a></li>
        <li><a href="#">Middle Two</a></li>
        <li><a href="#">Middle Three</a></li>
    </ul>
  </li>
</ul>

【问题讨论】：

ul 获取通过用户代理样式表应用的默认 padding-left。
你不应该将东西移出屏幕 999em，因为这意味着浏览器必须创建一个 999em 的框（这可以减少你的渲染时间）——尝试使用 display none 代替。另外，不要使用 top: 28px，使用 100% 可能会更好，因为如果任何浏览器不将该 li 呈现为 28px，它仍将放置在 li 下方

标签： css drop-down-menu

【解决方案1】：

只需在您的 UL 上将 padding-left 设置为零。下面标记了代码。

* {
  font-family: verdana;
}

li {
  list-style: none;
  padding: 4px 0;
  border: 1px solid green;
}

a {
  text-decoration: none;
}

ul li a {
  color: blue;
}

ul li ul li a {
  color: red;
}

ul li a:hover {
  opacity: 0.3;
}


/*--------------
 Salient code
----------------*/

ul li {
  float: left;
  /* horizontal */
  width: 120px;
  position: relative;
}

ul li:hover ul {
  left: auto;
}

ul li ul {
  position: absolute;
  left: -999em;
  top: 28px;
  /* Just set padding-left to zero here */
  padding-left:0;
}

<ul>
  <li><a href="#">Top One</a></li>
  <li><a href="#">Top Two</a></li>
  <li><a href="#">Top Three</a>
    <ul>
      <li><a href="#">Middle One</a></li>
      <li><a href="#">Middle Two</a></li>
      <li><a href="#">Middle Three</a></li>
    </ul>
  </li>
</ul>

【讨论】：