0

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

  1. 每个连续的子菜单与其父菜单重叠的数量越来越多。
  2. 试图通过设置left属性（每个子菜单已经有position:absolute）来修复项目 1 不起作用并且会疯狂地抛出菜单的位置。
  3. 每当显示子菜单时，right填充会自动增加，从而在菜单和菜单项的底部边框之间产生间隙。

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

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

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

4

2 回答 2

1

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

所做的更改：

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

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

编辑：

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

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

我想表格最重要的一点是，因为它们是内联元素，所以你不能分配position: relative给表格单元格，所以这就是你不能使用leftortop属性的原因。我没有浏览器测试过这个，但如果你走这条路，我总是会仔细检查。

于 2013-06-29T14:36:23.850 回答
0

如果您为您的 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;
}
于 2013-06-29T15:07:48.610 回答