有人可以向我解释为什么离开主菜单项会导致子菜单消失吗？并可能提供修复。今天早上我的 google-foo 技能低于标准水平。谢谢大家。
CSS:
body, html{
margin: 0;
}
.content{
padding: 30px;
}
.nav-main{
width: 100%;
background-color: #222;
height: 70px;
color: #fff;
}
.nav-main > ul{
margin: 0;
padding: 0;
float: left;
list-style-top: none;
}
.nav-main > ul > li {
float: left;
}
.nav-item {
display: inline-block;
padding: 15px 20px;
height: 40px;
line-height: 40px;
color: #fff;
text-decoration: none;
}
.nav-item:hover{
background-color: #444;
}
.nav-content{
position: absolute;
top: 70px;
overflow: hidden;
background-color: #222; /* same color as main nav*/
max-height: 0; /*will not display if .nav-content no padding */
}
.nav-content a{
color: #fff;
text-decoration: none;
}
.nav-content a:hover{
text-decoration: underline;
}
.nav-sub{
padding: 20px;
}
.nav-sub ul{
padding: 0;
margin: 0;
list-style-type: none;
}
.nav-sub > ul > li{
display: inline-block;
}
.nav-sub ul li a{
padding: 5px 0;
}
.nav-item:focus{
background-color: #444; /*remove if click focus not necessary*/
}
.nav-item:hover ~ .nav-content{
max-height: 400px;
-webkit-transition:max-height 0.6s ease-in;
-moz-transition:max-height 0.6s ease-in;
transition:max-height 0.6s ease-in;
}
HTML:
<body>
<nav class="nav-main">
<ul>
<li>
<a href="#" class="nav-item">first</a>
<div class="nav-content">
<div class="nav-sub">
<ul>
<li><a href="#">this is a thing</a></li>
<li><a href="#">this is a thing 2</a></li>
</ul>
</div>
</div>
</li>
<li>
<a href="#" class="nav-item">second</a>
</li>
<li>
<a href="#" class="nav-item">third</a>
</li>
</ul>
</nav>
<div class="content">this is content</div>
</body>
最佳答案
我已经改变了:
.nav-item:hover ~ .nav-content{
到
nav > ul > li:hover > .nav-content{
现在它开始工作了——例如: https://jsfiddle.net/saxkayv2/
关于css - 鼠标离开主菜单项后子菜单消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38015910/