CSS 问题导航下拉菜单

Question

我的 CSS 在第一级菜单上运行良好。完全没有问题。自从我开始尝试添加下拉菜单/子菜单以来，我遇到了各种各样的问题。

我能做到的最好的办法是让菜单像我想要的那样下拉到主菜单下方，但子菜单显示为内联而不是垂直列表。此外，菜单和子菜单块似乎比我想要的要高。我在导航容器内的所有东西上都将高度设置为继承，但我仍然得到 LI 分隔符的这个奇怪的扩展。如果您在 codepen 中翻转主菜单链接，您就会明白我的意思。我已经为此绞尽脑汁太久了，真的可以用全新的眼光来看待它，因为我已经对我的代码尝试了很多不同的调整，现在我迷路了。 （注意：我从 Suckerfish 的儿子那里得到了这个下拉菜单的框架。这是我至少到目前为止唯一可以工作的框架。）

Code

Answer 1

你可以添加这个：

#navigation ul ul li {
    display: block;
}

它在 codepen 中看起来不正确，因为背景图像未呈现。此外，锚点右侧的红色边框不会对齐，因为锚点的宽度取决于它们的内容。如果你想让它排成一行，你将不得不稍微摆弄一下。

Answer 2

添加宽度：50px；到#navigation li a