我正在关注 tutorial关于如何在悬停时制作纯 css 下拉菜单。 重新运行几次后,我仍然卡住了,希望能对我的问题得到一些好的解释。
<div class="navbar">
<ul>
<li>
<div><a href="3d.html">3D Printing</a></div>
<ul>
<li>
<div><a href="#">blah</a></div>
</li><li>
<div><a href="#">blah</a></div>
</li><li>
<div><a href="#">blah</a></div>
</li>
</ul>
<li>
<div><a href="#"></a></div>
</li><li>
<a href="#"></a>
</li>
</ul>
</div>
所以我认为这就是 HTML 没有错。
.navbar ul {
position: relative;
display: inline-block;
font-family: lemon;
list-style: none;
padding: 15px 0px;
font-size: 210%;
margin-left: 3%;
}
.navbar ul:after {
content: "";
clear: both;
display: block;
}
.navbar ul li {
display: block;
}
.navbar ul ul {
display: none;
font-size: 100%;
padding: 18px 5px;
}
navbar ul li:hover ul {
display: block;
}
.navbar ul ul li {
background: rgba(0,0,0,0.3);
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.navbar ul ul li:hover {
background: rgba(0,0,0,0.4)
}
.navbar ul li a {
display: block;
text-decoration: none;
color: white;
opacity: 0.8;
}
.navbar ul li a:hover {
opacity: 1;
}
问题出在这里的某个地方,但我找不到它,非常感谢您的帮助!
提前致谢并致以诚挚的问候。
雷蒙德锤子
最佳答案
请试试这个:
<div class="navbar">
<ul>
<li>
<a href="3d.html">3D Printing</a>
<ul>
<li><a href="#">blah</a></li>
<li><a href="#">blah</a></li>
<li><a href="#">blah</a></li>
</ul>
</li>
</ul>
</div>
CSS:
.navbar ul {
position: relative;
display: inline-block;
font-family: lemon;
list-style: none;
padding: 15px 0px;
font-size: 210%;
margin-left: 3%;
}
.navbar ul:after {
content: "";
clear: both;
display: block;
}
.navbar ul li {
display: block;
}
.navbar ul ul {
display: none;
font-size: 100%;
padding: 18px 5px;
}
.navbar ul li:hover ul {
display: block;
}
.navbar ul ul li {
background: rgba(0,0,0,0.3);
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.navbar ul ul li:hover {
background: rgba(0,0,0,0.4)
}
.navbar ul li a {
display: block;
text-decoration: none;
color: black;
opacity: 0.8;
}
.navbar ul li a:hover {
opacity: 1;
}
关于html - 下拉列表不显示,我做错了什么,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36234492/