CSS: выпадающий список сверху

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; в раскрывающемся списке.