我正在尝试创建一个下拉导航,其中包含一个具有visibility:none
的div框,但我认为当我在悬停时,我没有使用正确的元素。有帮助吗?我认为问题出在代码的最后一部分。感谢
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
visibility: hidden;
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
li>a:hover .nav-level-2{
display: block;
}
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div><a href="#">Submenu</a> </div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
答案 0 :(得分:2)
您需要在悬停时添加visibility:visible
并在悬停后添加+
符号,因为子菜单div位于锚点之外。 li>a:hover .nav-level-2
到li>a:hover + .nav-level-2
。 +
引用悬停元素的下一个元素。
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
visibility: hidden;
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
li>a:hover + .nav-level-2{
visibility:visible;
}
&#13;
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new">
<a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div><a href="#">Submenu</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
&#13;
答案 1 :(得分:0)
末尾的选择器不正确。您指定的内容会在悬停时选择锚标记内的“nav-level-2”类的所有元素。您需要使用'+'选择器选择紧跟在锚标记之后的div。并使div可见。
为此,请尝试将结尾处的css代码更改为 -
li>a:hover + .nav-level-2{
visibility: visible;
}
编辑:
要在将鼠标指针移动到菜单中时保持菜单打开,您需要将悬停选择器提供给容器div。
我已经更改了css的最后一位以选择'li'元素和'nav-whats-new'类,我在其上使用了悬停选择器来更改'nav-level-2的可见性'元素 -
li.nav-whats-new:hover .nav-level-2 {
visibility: visible;
}
这是更新的小提琴 -