悬停在下拉列表时发生了诡异的事情

Question

当我试图创建一个下拉列表时，我遇到了一个问题。（请参阅JSfiddle）当我将鼠标悬停在它上面时，导航菜单会从一侧移到另一侧。我还没有看到任何可以解决我问题的其他放置：/ < / p>

JSfiddle：http://jsfiddle.net/kavqc/2/

我认为问题出在这里：

.dropdown {
    position:absolute; 
    top:62px; 
    left:0; 
    visibility:hidden;
    background-color: red;
}

PS：我的英语不好

Answer 1

正如@KevinJantzer所提到的那样 - 通过改变margin-left来修复跳跃。

通过将position: relative添加到.li类来修复菜单定位：

.li {
    display:inline-block;
    position: relative;
    list-style:none;
}

Demo

Answer 2

菜单跳转到右边的原因是margin-left样式：

.navbar-menu:hover {
    ...
    margin-left: 200px; // remove this
    ...
 }

以下是您的jsFiddle margin-left 已移除：http://jsfiddle.net/kavqc/3/