0

所以我有这个我正在制作的导航栏；我有一个Jsfiddle来演示。如果您将鼠标悬停在一个元素上，则会出现子列表，但如果您仔细观察，它的左边缘距离调用它的导航栏元素仅 1 个像素。

有没有我可以添加的 CSS 规则来摆脱这个问题，即将子列表移回一个像素？我知道可以使用 JS 来实现这一点（获取每个导航栏元素，计算它与左侧的距离，获取它的子列表并给它一个比元素的左值小 1 的左值），但现在我想暂时避免它。

如果可能，我更喜欢 CSS 解决方案，但当然不是，请告诉我，如果可以，请提供 JS 替代方案。

4

3 回答 3

1

负利润救援 http://jsfiddle.net/pZy8V/4/

#nav li:hover ul {
    display: block;
    position: absolute;
    margin: 0 0 0 -1px; /* margin: 0; */
    list-style: none;
    padding: 0;
}
#nav li:hover li {
    float: none;
}
于 2012-06-08T07:42:40.753 回答
1

只需添加margin-left: -1px;到您#nav li:hover ul将其向左推 1 个像素。

看到它在这里工作。

于 2012-06-08T07:43:29.587 回答
0

如果您删除所有边框，问题就会消失。所以答案可能在于重新设计您的 HTML/CSS 边框使用

请参阅此修改后的JSFiddle

如果您只是想要一个快速而肮脏的修复，您可以将以下内容添加到您的原始 CSS

#nav li {
    float: left;
    position:relative;
    left:-1px;
}
于 2012-06-08T07:41:19.730 回答