html - 悬停在下拉菜单上时会发生怪异的事情

Question

我在尝试创建下拉菜单时遇到问题。（请参阅 JSfiddle）当我将鼠标悬停在导航菜单上时，导航菜单会左右移动。我还没有看到任何其他可以解决我的问题的地方：/

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

我认为问题出在一个地方：

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

PS：对不起我的英语不好

Answer 1

正如@KevinJantzer 提到的 - 通过改变左边距来修复跳跃。

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

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

演示

Answer 2

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

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

margin-left 这是您删除的 jsFiddle ：http : //jsfiddle.net/kavqc/3/