我在 YouTube 上查找制作精良的下拉导航栏，最后找到了一个看起来不错的专业导航栏。它具有焦点命令，当您单击它时，它会打开下拉菜单。我决定使用悬停而不是焦点会更专业，但问题是当我将鼠标悬停在链接上时它会像它应该的那样打开菜单但是当我向下滚动以单击下拉菜单中的某些内容时下拉菜单消失了事实上，我不再将鼠标悬停在主链接上。我尝试在线查找解决方案，但一无所获。我必须特别强调我正在尝试仅使用 CSS 而不是 JavaScript 来完成此操作。任何帮助将不胜感激。
.nav-main{
width:100%;
background-color:#222;
height:70px;
color:#fff;
}
.nav-main .logo{
float:left;
height:40px;
padding:15px 30px;
font-size:1.4em;
line-height:40px;
}
.nav-main > ul{
margin:0;
padding:0;
float:left;
list-style-type: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-content{
position:absolute;
top:70px;
overflow:hidden;
background-color:#222;
max-height:0;
}
.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 a{
display:inline-block;
padding:5px 0;
}
.nav-item:hover{
background-color:#222;
}
.nav-item:hover ~ .nav-content{
max-height:400px;
-webkit-transition:max-height 400ms ease-in;
-moz-transition:max-height 400ms ease-in;
transition:max-height 400ms ease-in;
}
HTML
<body>
<nav class="nav-main">
<div class="logo">Thomas</div>
<ul>
<li>
<a href="#" class="nav-item">Porfolio</a>
<div class="nav-content">
<div class="nav-sub">
<ul>
<li><a href="#">Site 1</a></li>
<li><a href="#">Site 2</a></li>
<li><a href="#">Site 3</a></li>
</ul>
</div>
</div>
</li>
<li>
<a href="#" class="nav-item">CSS</a>
<div class="nav-content">
<div class="nav-sub">
Some Text
</div>
</div>
</li>
<li>
<a href="#" class="nav-item">CodeCourse</a>
</li>
</ul>
<nav>
</body>
</html>
最佳答案
您将 :hover 附加到 HTML 中的错误元素。您需要将 :hover 放在 <li> 中包含每个菜单的整个导航。只需向该元素添加一个新类并像这样更改 CSS:https://jsfiddle.net/fapfz1ms/
新的 HTML:
<body>
<nav class="nav-main">
<div class="logo">Thomas</div>
<ul>
<li class="nav-item-container">
<a href="#" class="nav-item">Porfolio</a>
<div class="nav-content">
<div class="nav-sub">
<ul>
<li><a href="#">Site 1</a></li>
<li><a href="#">Site 2</a></li>
<li><a href="#">Site 3</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item-container">
<a href="#" class="nav-item">CSS</a>
<div class="nav-content">
<div class="nav-sub">
Some Text
</div>
</div>
</li>
<li class="nav-item-container">
<a href="#" class="nav-item">CodeCourse</a>
</li>
</ul>
<nav>
</body>
</html>
CSS 现在应该是这样的:
.nav-main{
width:100%;
background-color:#222;
height:70px;
color:#fff;
}
.nav-main .logo{
float:left;
height:40px;
padding:15px 30px;
font-size:1.4em;
line-height:40px;
}
.nav-main > ul{
margin:0;
padding:0;
float:left;
list-style-type: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-content{
position:absolute;
top:70px;
overflow:hidden;
background-color:#222;
max-height:0;
}
.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 a{
display:inline-block;
padding:5px 0;
}
.nav-item:hover{
background-color:#222;
}
.nav-item-container:hover .nav-content {
max-height:400px;
-webkit-transition:max-height 400ms ease-in;
-moz-transition:max-height 400ms ease-in;
transition:max-height 400ms ease-in;
}
关于css - 在 :hover 上保持菜单打开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34383542/