对于另一个内部的元素,我有一个边缘顶部和边距为12像素的菜单,但是当光标位于该空间(边距)之间时,菜单被隐藏。我可以解决这个问题,如果我删除位置:绝对,但我需要它。我怎么解决这个问题?
HTML
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Food</a>
<ul>
<li><a href="#">Chilean food</a></li>
<li><a href="#">Chinese food</a></li>
<li><a href="#">Mexican food</a>
<ul>
<li><a href="#">Nachos</a></li>
<li><a href="#">Quesadillas</a></li>
<li><a href="#">Tacos</a></li>
</ul>
</li>
</ul>
CSS
ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
ul li {
position: relative;
}
ul li ul {
display: none;
position: absolute;
margin-top: 4px;
}
ul li:hover > ul {
display: block;
}
ul li a {
text-decoration: none;
padding: 12px;
display: block;
background: black;
color: white;
white-space: nowrap;
}
ul li ul li ul {
top: 0;
left: 100%;
margin-top: 0;
margin-left: 4px;
}
的jsfiddle:https://jsfiddle.net/v3ebd6hy/3/
谢谢!
在margin-top
将padding-top
改为ul li ul
。