我只想使用CSS,不使用JavaScript。當我將鼠標懸停在頂層菜單上時,我可以顯示子菜單,但只要取消頂層菜單中的子菜單,就會消失。我怎麼能解決這個問題,而不使用JavaScript?我錯過了什麼嗎?菜單取消隱藏後CSS子菜單不會顯示無javascript
我試圖使用.has-children:hover + .sub-menu {display: block;}
來顯示子菜單,當我將鼠標懸停在頂層菜單上,但我不知道我可以編碼以保持可見的子菜單。
的HTML代碼是:
.header ul {
list-style: none;
padding: 20px 30px;
}
.header li {
float: left;
position: relative;
}
.header li a {
padding: 20px 30px;
}
.menu {
clear: none;
float: right;
max-height: none;
}
.menu li ul {
position: absolute;
}
.sub-menu {
display: none;
}
.open-menu-link {
display: none;
}
.has-children:hover + .sub-menu {
display: block;
}
<header class="header">
<ul class="menu">
<li><a href="#work">Work</a></li>
<li>
<a class="has-children" href="#about">Haschildren</a>
<ul class="sub-menu">
<li><a href="#link1">Child 1</a></li>
<li><a href="#link2">Child 2</a></li>
<li><a href="#link3">Child 3</a></li>
</ul>
</li>
<li><a href="#careers">Careers</a></li>
<li>
<a class="has-children" href="#careers">About</a>
<ul class="sub-menu">
<li><a href="#link1">Child 3</a></li>
<li><a href="#link2">Child 4</a></li>
</ul>
</li>
<li><a href="#">end</a></li>
</ul>
</header>