CSS:Dropdown浮在上面

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适用于绝对定位的元素,如果你遇到让它出现在其他东西后面的问题.