我的子菜单在悬停时消失。当我将鼠标悬停在菜单项上时,它会出现,但是当我尝试转到子菜单项时,它就会消失。知道为什么吗?
我尝试这样做:
.nav ul li:hover ul {
display: block !important;
}
但是我仍然有同样的问题。任何帮助将不胜感激!
HTML:
<div class="nav">
<ul>
<li>
<a href="#">Testing</a>
<ul>
<li><a href="#">Testing 1</a></li>
</ul>
</li>
</ul>
</div>
CSS:
.nav ul {
letter-spacing: 2px;
margin-top: 10px;
}
.nav ul li {
display: inline-block;
border-right: 1px solid #7d7a7a;
}
.nav ul ul li {
border-right: none;
}
.nav ul li:last-child {
border-right: none;
}
.nav ul li a {
display: inline-block;
color: #000;
text-decoration: none;
padding: 0 10px;
height: 80%;
}
.nav ul li a i {
color: #000;
}
.nav ul ul li:hover ul {
display: block;
}
.nav ul li:hover ul {
display: block !important;
}
.nav ul li ul {
position: absolute;
display: none;
background-color: #333;
height: auto;
top: 34px;
padding: 13px 10px;
}
.nav ul li ul li:hover {
background-color: #47a3da;
}
JSFiddle demo
最佳答案
之所以发生这种情况,是因为下拉菜单和按钮之间存在间隙。
您需要删除所有边距和顶部,以使下拉菜单位于按钮下方。
Demo
.nav > ul {
letter-spacing: 2px;
margin-top: 10px;
}
.nav ul li ul {
position: absolute;
display: none;
background-color: #333;
height: auto;
padding: 13px 10px;
}
关于html - 子菜单在悬停时消失,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45381709/