我试图制作一些汉堡风格的导航栏,当我:悬停那个汉堡时,ul(实际上是菜单)打开,但是在尝试选择我的一个 li 时,它消失了。我想在 css/html 方面获得一些帮助。非常感谢<3平安
* {
padding: 0;
margin: 0;
box-sizing: border-box;
list-style: none;
}
nav {
height: 80px;
width: 100%;
position: relative;
}
nav .logo {
line-height: 2;
margin-left: 50px;
}
nav img {
width: 2em;
position: absolute;
right: 2em;
top: 1.5em;
cursor: pointer;
}
nav ul {
position: absolute;
padding: 20px;
width: 100%;
top: 0;
display: none;
}
nav ul li {
margin-top: 30px;
text-align: center;
line-height: 5;
}
nav ul li a {
font-size: 1.3em;
}
nav ul li a:hover {
border-bottom: 2px solid black;
}
img:hover+.openw {
display: block;
}
<nav class="nav">
<label for="" class="logo">DesignX</label>
<img src="240.png" alt="">
<ul class="openw">
<li><a href="#" class="active">a</a></li>
<li><a href="#">a</a></li>
<li><a href="#">a</a></li>
<li><a href="#">a</a></li>
<li><a href="#">a</a></li>
</ul>
</nav>
</body>