html - 使用悬停移动 div

Question

我需要一些关于这段代码的帮助。我正在尝试创建一个菜单。我已经在 jsFiddle 中证明了这一点

我的问题是，当我将鼠标悬停在按钮上时，按钮(实际上不是按钮)一直在移动，可以使用什么方法将其保持在原位？

这是我的一些代码

    <div id="start_bar">
        <div id ="start_button">
    Test

            <div id="nav">
            Hello World
            </div>

        </div>
    </div>

和CSS

    #start_button{
height:48px;
width:48px;
background-image:url('images/start.png');
color:white;
}
#start_button:hover  {
height:48px;
width:48px;
background-image:url('images/start.png');
margin-top: -18px;
}

#nav {
    display: none;
}
#start_button:hover > #nav {
display: block;
width: 70px;
height: 150px;
margin-top: -150px;
background-color: grey;
}

Answer 1

去掉你的 :hover 伪选择器:

#start_button:hover {
  margin-top: -18px;  /* This causes it to shift up */
}

没有它，它工作得很好:http://jsfiddle.net/qkGR4/3/