对于建议您使用 ids 和 classes 的人，除了可能第一个 ul 被 id'ed 为“菜单”之外，没有必要。我这样说是因为您要寻找的是非常严格和结构化的。
据我了解，您正在尝试完成以下操作：获取一个水平主菜单，当将鼠标悬停在主菜单“链接”上时，该菜单在下方显示另一个水平子菜单
如下图：
----------------------------------------------------------------------
Menu-Item 1 | Menu Item 2 (hovered over) | Menu Item 3
----------------------------------------------------------------------
| Sub Menu 1 | Sub Menu 2 | Sub Menu 3
-------------------------------------------------------
现在我没有人告诉你如何设计你的菜单。但正如你现在所看到的，我什至不确定它应该如何工作。第二个菜单是否应该左对齐到它悬停的主菜单项的最左边？或者第二个菜单是否应该与整个菜单左对齐，一直到左边？
如果是第一个，最后一个菜单项的空间太小，无法在下面有链接（最多一个或两个），如果是第二个版本，那么人们会因为他们不断“丢失”子菜单而感到沮丧当将鼠标悬停在最后一个菜单项上时（在我们的示例中：菜单项 3）试图访问一直到左侧的链接时。相信我，大多数用户都不太擅长鼠标，相信我，第一个版本看起来很糟糕。
因此，当主菜单是水平的时，人们会使用垂直的子菜单，但同样，我不会质疑你的动机。我会尽量以最好的方式回答你的问题，这将是第二种方式，设置如下：
----------------------------------------------------------------------
Menu-Item 1 | Menu Item 2 (hovered over) | Menu Item 3
----------------------------------------------------------------------
Sub Menu 1 | Sub Menu 2 | Sub Menu 3 | (blank)
----------------------------------------------------------------------
首先，您的代码甚至没有设置成这样。您的代码当前的编写方式最终会像我向您展示的第一个示例一样（正如我所解释的，如果您的菜单占据了页面的宽度，那么最后一个菜单项将只有很少的水平空间来显示内容当然）
所以要实现这个目标，你必须摆脱你的 li 的相对定位。如果出于某种原因必须将其设置为相对的另一个想法是将主菜单的每个 li 设置为不同的 z-index 并将它们设置为左边距/填充以及右边距/填充以“适合”整个菜单。我发现这是一个“黑客”，宁愿省略你的 li 的相对定位。
绝对 ul 嵌套在你的相对对象下面（不管是什么，在这种情况下它是菜单
) 只能占用您指定的空间。在这种情况下，100% 只是它嵌套在下面的 li 的大小。您可以将其设置为大于 100% 的值，例如 500 像素，但这会导致问题有两个原因：1) 您将无法将所有子菜单设置为您可能希望的左侧绝对菜单，因为嵌套元素的绝对左侧只会是它嵌套在下面的 li 的最左边。 2) 这不好，因为最右边的菜单的子项会漂移到整个菜单的右侧。
如果您必须保持主菜单的相对位置，则必须手动单独设置每个嵌套 ul 的左侧位置。对于除第一个之外的所有浏览器，这将是一个负数，并且不是一门精确的科学，因为所有浏览器都不显示相同的字体（因此会导致菜单项的宽度略有变化，为了解决这个问题，你会需要在所有年龄段的所有浏览器中使用完美宽度的图像）。但这分散了 CSS 的美感，即使用几行代码来设计多个元素。
从主菜单 li (#main-menu > ul > li) 中删除“相对”定位并为其添加一些底部填充会容易得多，否则您将永远无法将鼠标悬停在子菜单，每次它都会消失。如果我不得不猜测你在做什么并且我正在编写 CSS/HTML，我会这样做：
HTML：
<li>A
<ul>
<li>A1<li>
<li>A2<li>
<li>A3<li>
</ul>
</li>
<li>B
<ul>
<li>B1<li>
<li>B2<li>
<li>B3<li>
</ul>
</li>
<li>C
<ul>
<li>C1<li>
<li>C2<li>
<li>C3<li>
</ul>
</li>
</ul>
CSS：
ul#main-menu{ list-style:none;}
ul#main-menu > li {
float: left;
margin-left: 1em;
padding-bottom: 3em; /*make this the line-height space underneat the main menu, plus the heigh of the secondary menu, plus the extra space you wanna give the user to not lose focus on the second menu*/
}
ul#main-menu > li:first-child {margin-left: 0;}
ul#main-menu > li > ul {
display: none;
}
ul#main-menu > li:hover > ul {
position: absolute;
display: block;
left: 0;
list-style: none;
}
ul#main-menu > li:hover > ul > li,
ul#main-menu > li > ul:hover > li {
position: relative;
float: left;
margin-left: 1em;
}
ul#main-menu > li:hover > ul > li:first-child,
ul#main-menu > li > ul:hover > li:first-child {margin-left: 0px}
我已经在自己的浏览器上对此进行了测试，它似乎可以按照您的意愿工作。到现在为止，您应该知道其他两种方法来实现这一点，但结果各不相同，工作量也比这个版本多。