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/

Answer 2

从margin-top

中删除#start_button:hover属性

Answer 3

从margin-top移除属性#start_button:hover并增加#start_button:hover > #nav高度：

#start_button:hover  {
    height:48px;
    width:48px;
    background-image:url('images/start.png');
}
#start_button:hover > #nav {
    display: block;
    width: 70px;
    height: 131px;
    margin-top: -150px;
    background-color: grey;
}

http://jsfiddle.net/qkGR4/5/

Answer 4

不要使用margin-top: -Xpx;将菜单移动到位，而是将其置于绝对位置left: 0; bottom: 100%;。这将起作用，您不必为菜单或菜单栏输入像素高度。

<强> Demo

通常，您希望避免为元素设置高度。元素的高度应尽可能经常由内容决定。或者，在这种情况下，position: absolute; bottom: 100%;使元素向上移动100％相对坐标系的高度... position: absolute;也从文档流中释放元素。然后，菜单随时可以“更高”地增长。

使用悬停移动div

4 个答案: