CSS：下拉浮动在顶部 [英] CSS: Dropdown float on top

问题描述

所以我有这个下拉列表在html / css / js ..它滑下来的鼠标悬停，但现在它滑下来错误，我的意思是它移动我的文本，我不想要它做..我想要喜欢浮动它，所以文本在菜单后面下来

在左边它是怎么回事，而在右边它的鼠标悬停。
，您可以看到示例我文本，我不希望它像这样移动，我希望菜单喜欢浮动在顶部，所以当你再次移开你的鼠标可以看到示例我 / p>

这是我的css菜单：

  .menu_class {
 border：1px solid＃1c1c1c; 
} 
 
 .the_menu {
显示：无; 
 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; 
颜色：＃fffc30; 
} 
 
< img src =images / button.pngwidth =126height =23class =menu_class> 
< ul class =the_menu> 
< li>< a href =＃> Profil< / a>< / li> 
 
< / ul> 
  

解决方案

要使其位于其他元素之上，您需要使用

  .the_menu {
 position：absolute 
}  / pre> 
 
 
如果您无法定位，请放置：相对于任何元素包含.the_menu 
 
 
 
另外请注意，z-index适用于绝对定位的元素，如果您遇到出现其他问题的问题。
 
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>

解决方案
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.

                        
这篇关于CSS：下拉浮动在顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！