3

我需要这个代码的小帮助。我正在尝试创建一个菜单。我已经在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;
}
4

4 回答 4

3

摆脱你的:hover伪选择器：

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

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

于 2013-01-13T01:25:32.850 回答
3

删除margin-top属性#start_button:hover

于 2013-01-13T01:25:56.523 回答
1

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

演示

通常，您希望避免为元素设置高度。元素的高度应尽可能由内容决定。或者，在这种情况下，position: absolute; bottom: 100%;使元素上升到相对坐标系高度的 100%……position: absolute;也将元素从文档流中释放出来。然后菜单可以根据需要自由地“变高”。

于 2013-01-13T02:09:42.113 回答
1

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/

于 2013-01-13T01:29:27.083 回答