在绝对位置之后设置左侧属性时 CSS 下拉菜单中断答案

【问题标题】：CSS Dropdown Menu Breaks When Setting Left Property After Position Absolute在绝对位置之后设置左侧属性时 CSS 下拉菜单中断
【发布时间】：2013-06-29 14:11:22
【问题描述】：

我目前正在处理 CSS 下拉菜单，但遇到了以下问题：

每个连续的子菜单与其父菜单的重叠量越来越大。
尝试通过设置left 属性（每个子菜单已经有position:absolute）来修复项目1 不起作用，并且会严重偏离菜单的位置。
每当显示子菜单时，right 填充会自动增加，从而导致菜单与菜单项的底部边框之间出现间隙。

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

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

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

【问题讨论】：

标签： css drop-down-menu

【解决方案1】：

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

所做的更改：

摆脱了所有表格显示，您使用它的唯一原因是垂直对齐，您可以在<a> 上使用line-height。
所有子菜单<ul>现在都根据left: 100%;和top: 0;的父级定位

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

编辑：

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

已更改li a { display: block; line-height: 30px; }
添加了将ul 移动到-42px 0 0 130px 的边距

我想表格最大的问题是，由于它们是内联元素，您不能将position: relative 分配给表格单元格，这就是为什么您不能使用left 或top 属性的原因。我没有在浏览器上测试过这个，但如果你走这条路，我总是会仔细检查。

【讨论】：

虽然这种方法有效，但它会损害列表的“状态性”。如果没有display: table-header-group，列表顺序会在悬停时重新使用。
您是否有理由无法操纵 DOM 的顺序，以便您希望激活的 li 成为第一个？然后在#dropdownMenu:hover 上只显示li 的其余部分，类似于这个小提琴：jsfiddle.net/xUWdj/2
如果你绝对不能使用脚本来操作它，你总是可以像用这个小提琴一样调整边距，我相信这是你想要的，保留大部分表格显示： jsfiddle.net/HSh5n/2

【解决方案2】：

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

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;
}

【讨论】：