CSS：下拉菜单浮动在顶部

发布于 2024-09-13 05:34:35 字数 678 浏览 2 评论 0原文

所以我用 html/css/js 制作了这个下拉菜单..它在鼠标悬停时向下滑动，但现在它向下滑动错误，我的意思是它将我的文本向下移动，这是我不希望它这样做的..我希望它像浮动一样在它上面，所以文本位于下拉菜单的后面

左边是它的样子，右边是鼠标悬停时的样子。正如您所看到的“示例我”文本，我不希望它像那样向下移动，我希望菜单像浮动在顶部一样，这样当您再次移开鼠标时，您可以看到“示例我”

这是我的菜单 CSS：

.menu_class {
    边框：1px实心#1c1c1c；
}

.the_menu {
    显示：无；
    宽度：150px；
    边框：1px实线#1c1c1c；
}

.the_menu li {
    背景颜色：#283d44；
}

.the_menu li a {
    颜色：#FFFFFF； 
    文本装饰：无； 
    内边距：10px； 
    显示：块；
}

.the_menu li a:hover {
    内边距：10px；
    字体粗细：粗体；
    颜色：#fffc30；
}



简介

原文

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>

分享到QQ

分享到微博