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

Question

我目前正在开发一个CSS下拉菜单，我遇到了以下问题：

1. 每个连续的子菜单与其父菜单重叠的数量越来越多。
2. 尝试通过设置left属性（每个子菜单已经有position:absolute）修复第1项不起作用，并且大幅丢弃菜单的位置。
3. 每当显示子菜单时，right填充会自动增加，导致菜单与菜单项的下边框之间出现间隙。

在CSS中我使用display: table-*（星形是任何与表格相关的显示值），以便使文本的垂直居中更容易，并且更容易将所选菜单项保持在列表的顶部（见display: table-header）。

我真的很想知道解决上述问题的解决方案和。

作为参考，我已经创建了一个功能齐全的JsFiddle。

Answer 1

我在这里做了一个小提琴http://jsfiddle.net/xUWdj/

所做的更改：

1. 摆脱了所有桌面显示，您使用它的唯一原因是垂直对齐，您可以使用line-height上的<a>代替。
2. 现在，<ul>＆amp; left: 100%;

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

编辑：

这是一个允许您继续使用top: 0; http://jsfiddle.net/HSh5n/2/

的版本
1. 已更改table-group-header
2. 添加了边距以将li a { display: block; line-height: 30px; }移至ul

我认为表格最重要的是因为它们是内联元素，所以你不能将-42px 0 0 130px分配给表格单元格，这就是为什么你不能这样做的原因。使用position: relative或left属性。我没有浏览器测试过这个，但我总是仔细检查你是否走这条路。

Answer 2

如果您为李某添加右边框{...}，您可以了解导致重叠的原因。

li a {
    display: table-cell;
    border-bottom: solid 1px #cccccc;

    border-right: solid 1px #cccccc;

    text-decoration: none;
    color: rgba(89,87,87,0.9);
    height: 30px;
    padding: 5px;
    vertical-align: middle;
    cursor: pointer;
}