我有一个悬停的菜单栏,它应该显示一个子菜单。我正在显示子菜单,但它会将整个主菜单移到一边。我想要主菜单之外的子菜单,在主菜单旁边。
我的 HTML 代码
<div class="MenuBar">
<ul>
<li><a href="#"><img src="#"><br>text1</a></li>
<div id="submenu">
this is a test div
</div>
<li><a href="#"><img src="#"><br>text2</a></li>
<li><a href="#"><img src="#"><br>text3</a></li>
</ul>
CSS
#submenu {
display: none;
}
.MenuBar ul li a:hover #submenu {
display: block;
position: relative;
top: 20px;
}
最佳答案
我认为这就是您所追求的。我已将类添加到列表中,将您的 id 子菜单更改为类,并将子菜单项添加到所有列表中。
.MenuBar ul li .submenu {
display: none;
}
.MenuBar ul li.men1:hover .submenu {
display: inline-block;
position: relative;
top: 20px;
}
.MenuBar ul li.men2:hover .submenu {
display: inline-block;
position: relative;
top: 20px;
}
.MenuBar ul li.men3:hover .submenu {
display: inline-block;
position: relative;
top: 20px;
}
<div class="MenuBar">
<ul>
<li class="men1"><a href="#">text1</a>
<div class="submenu">
hovered 1st
</div></li>
<li class="men2"><a href="#">text2</a>
<div class="submenu">
hovered 2nd
</div></li>
<li class="men3"><a href="#">text3</a><div class="submenu">
hovered 3rd
</div></li>
</ul>
如果这就是您想要的,请告诉我。
关于html - 在菜单栏外悬停显示div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44479958/