我在这段代码中搜索了一些错误,这些错误会使它无法正常工作,但似乎找不到任何错误。除菜单不会下拉菜单外,其他所有菜单均显示良好。有人有提示吗?
这是我的代码片段:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #5BC8C3;
position: fixed;
top: 60px;
width: 100%;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: #f7f7f7;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: #F7f7f7;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #284A64;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
color: #f7f7f7;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f7f7f7
}
.dropdown:hover .dropdown-content {
display: block;
}
<ul>
<li><a class="active" href="#index">Home</a>
</li>
<li><a href="#catalog">Catalog</a>
</li>
<li><a href="#calendar">Calendar</a>
</li>
<li class="dropdown">
<a href="#" class="dropbtn">Library Information</a>
<div class="dropdown-content">
<a href="#childrensprogram">Children's Programs</a>
<a href="#adultprograming">Adult Programs</a>
<a href="#help">Help Services</a>
<a href="#otherserv">Other Services</a>
<a href="#policy">Library Policies</a>
</div>
</li>
<li><a href="#contact">Contact</a>
</li>
</ul>
感谢您的任何建议!
好吧,下拉菜单实际上显示了:)
但是我们看不到它,因为您的菜单是
溢出:隐藏;
如果删除此css行,则菜单将起作用:
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #5BC8C3;
position: fixed;
top: 60px;
width: 100%;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: #f7f7f7;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: #F7f7f7;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #284A64;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
color: #f7f7f7;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f7f7f7
}
.dropdown:hover .dropdown-content {
display: block;
}
<ul>
<li><a class="active" href="#index">Home</a>
</li>
<li><a href="#catalog">Catalog</a>
</li>
<li><a href="#calendar">Calendar</a>
</li>
<li class="dropdown">
<a href="#" class="dropbtn">Library Information</a>
<div class="dropdown-content">
<a href="#childrensprogram">Children's Programs</a>
<a href="#adultprograming">Adult Programs</a>
<a href="#help">Help Services</a>
<a href="#otherserv">Other Services</a>
<a href="#policy">Library Policies</a>
</div>
</li>
<li><a href="#contact">Contact</a>
</li>
</ul>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句