CSS: Dropdown float on top

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>

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.

Use position: absolute; on the dropdown.