Question

So i have this dropdown made in html/css/js.. it slides down on mouseover, but right now it slides down wrong, i mean it moves my text down which i dont want it to do.. i want it to like float over it so the text is behind the menu that comes down

At left its how it is, and on right side its when mouse over.
and as you can see the “example me” text i dont want it to move down like that, i want the menu to like float on top so when you move away your mouse again you can see “example me”

Here’s my css for the menu:

.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

To have it positioned on top of other elements, you need to use

.the_menu{
position:absolute
}

If you have trouble positioning it, give position:relative to whatever element contains .the_menu

Also be aware that z-index works well with absolutely positioned elements, if you run into the problem of having it show up behind something else.