在位置绝对后设置左属性时，CSS 下拉菜单中断

Question

我目前正在研究 CSS 下拉菜单，但遇到了以下问题:

1. 每个连续的子菜单与其父菜单重叠的次数越来越多。
2. 尝试通过设置 left 属性(每个子菜单已经有 position:absolute)来修复第 1 项是行不通的，并且会严重偏离菜单的位置。
3. 每当显示子菜单时，右 内边距会自动增加，从而导致菜单与菜单项底部边框之间出现间隙。

在 CSS 中，我使用 display: table-*(星号是任何与表格相关的显示值)，以便使文本的垂直居中更容易，并且更容易保留所选菜单列表顶部的元素(参见 display: table-header)。

我真的很想知道解决上述问题的和原因。

作为引用，我创建了一个功能齐全的 JsFiddle .

Answer 1

我在这里做了一个 fiddle http://jsfiddle.net/xUWdj/

所做的更改:

1. 摆脱了所有表格显示，您使用它的唯一原因是为了垂直对齐，您可以利用 line-height在 <a> 上而不是。
2. 所有子菜单 <ul>现在的位置基于其父级 left: 100%; & top: 0;

您现在应该可以根据需要设置菜单其余部分的样式/位置。

编辑:

这是一个允许您继续使用 table-group-header 的版本http://jsfiddle.net/HSh5n/2/

1. 已更改 li a { display: block; line-height: 30px; }
2. 添加边距以移动 ul到-42px 0 0 130px

我想表格最重要的一点是，因为它们是内联元素，所以你不能分配 position: relative到表格单元格，所以这就是为什么你不能使用 left或 top特性。我没有在浏览器中对此进行过测试，但我总是会仔细检查你是否走这条路。