Question

所以我在html / css / js中有这个下拉列表..它在鼠标悬停时向下滑动，但是现在它向下滑动错误，我的意思是它将我的文本向下移动，我不希望它这样做..我想要它喜欢漂浮它，所以文本在菜单后面

左边是它的样子，右边是鼠标悬停的时候。正如你可以看到“示例我”的文字，我不希望它像这样向下移动，我希望菜单喜欢漂浮在顶部，所以当你再次移开鼠标时，你可以看到“示例我”

这是菜单上的css：

.menu_class {
    border:1px solid #1c1c1c;
}

.the_menu {
    display:none;
    width:150px;
    border: 1px solid #1c1c1c;
}

.the_menu li {
    background-color: #283d44;
}

.the_menu li a {
    color:#FFFFFF; 
    text-decoration:none; 
    padding:10px; 
    display:block;
}

.the_menu li a:hover {
    padding:10px;
    font-weight:bold;
    color: #fffc30;
}

<img src="images/button.png" width="126" height="23" class="menu_class">
<ul class="the_menu">
<li><a href="#">Profil</a></li>

</ul>

Answer 1

要将其置于其他元素之上，您需要使用

.the_menu{
position:absolute
}

如果您在定位时遇到问题，请给出位置：相对于包含的任何元素.the_menu

另外请注意，z-index适用于绝对定位的元素，如果遇到将其显示在其他内容之后的问题。

Answer 2

在下拉列表中使用position: absolute;。

CSS：Dropdown浮在上面

2 个答案: