我在悬停上有一个菜单栏,它应该显示一个子菜单。我正在显示子菜单,但它将整个主菜单移到一边。我希望子菜单不在主菜单旁边的主菜单中。
我的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;
}
答案 0 :(得分:0)
更改Html像这样:
<li>
<a href="#"><img src="#"><br>text1</a>
<div id="submenu"><-----------------submenu must be child li
this is a test div
</div>
</li>
和Css一样:
.MenuBar ul li a:hover + #submenu {<--------------use + selector
display: block;
position: relative;<-----Remove This
top: 20px;<------Remove This
margin-top: 20px;<----------Add This
margin-bottom: 10px;<-------Add This
}
完整代码:
#submenu {
display: none;
}
img {
width: 20px;
}
ul {
list-style: none;
}
.MenuBar ul li a:hover + #submenu {
display: block;
margin-top: 20px;
margin-bottom: 10px;
}
&#13;
<div class="MenuBar">
<ul>
<li>
<a href="#">
<img src="https://www.seeklogo.net/wp-content/uploads/2012/12/apple-logo-eps-logo-vector-400x400.png"><br>text1
</a>
<div id="submenu">
this is a test div
</div>
</li>
<li>
<a href="#">
<img src="https://www.seeklogo.net/wp-content/uploads/2012/12/apple-logo-eps-logo-vector-400x400.png"><br>text2
</a>
</li>
<li>
<a href="#">
<img src="https://www.seeklogo.net/wp-content/uploads/2012/12/apple-logo-eps-logo-vector-400x400.png"><br>text3
</a>
</li>
</ul>
</div>
&#13;
答案 1 :(得分:0)
我认为这就是你所追求的。我已将类添加到列表中,将您的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;
}
&#13;
<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>
&#13;
请告诉我这是否是你所追求的。
答案 2 :(得分:0)
您可以使用以下CSS:
如果要在父菜单底部显示子菜单
.MenuBar ul li {
position: relative;
}
.MenuBar ul li:hover #submenu {
display: block;
position: absolute;
top: 100%;
left: 0px;
}
或者如果要在父菜单右侧显示子菜单
.MenuBar ul li {
position: relative;
}
.MenuBar ul li:hover #submenu {
display: block;
position: absolute;
top: 0;
left: 100%;
}
答案 3 :(得分:0)
将子菜单div放在列表之外。如果你把它放在一堆列表项中并使用display属性,它将影响列表结构。将div放在列表项之外,使用css定位子菜单div,使其始终与相应的菜单项对齐,然后添加悬停效果。