Navbar删除间距 - CSS还是JavaScript？

Question

所以我有这个导航栏我正在制作;我有一个Jsfiddle来演示。如果将鼠标悬停在某个元素上，则会显示该子列表，但如果仔细观察，其左边缘只是召唤它的导航栏元素前面的1个像素。

我是否可以添加任何CSS规则来摆脱这种情况，即将子列表移回像素？我知道有可能用JS来实现这一点（获取每个navbar元素，计算它与左边的距离，取其子列表并给它一个比元素小一个的左值），但是现在我想要现在就避开它。

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

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

Answer 2

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

see it working here.

Answer 3

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

请参见此已撤销的JSFiddle

如果您只想快速修复，可以将以下内容添加到原始CSS中

#nav li {
    float: left;
    position:relative;
    left:-1px;
}