CSS：下拉浮动在顶部

我用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>

.menu\u类{
边框：1px实心#1c1c；
}
.菜单{
显示：无；
宽度：150px；
边框：1px实心#1c1c；
}
.李先生{
背景色：283d44；
}
.菜单李a{
颜色：#FFFFFF；
文字装饰：无；
填充：10px；
显示：块；
}
.菜单a:悬停{
填充：10px；
字体大小：粗体；
颜色：#fffc30；
}

使用

位置：绝对在下拉列表中。
要将其放置在其他元素的顶部，您需要使用

.the_menu{
position:absolute
}
如果定位有困难，请给出位置：相对于包含的任何元素

还要注意的是，如果您遇到了让z-index显示在其他元素后面的问题，那么z-index可以很好地处理绝对定位的元素