Dropdown Menu Not Working? - html

Question

I've searched through this code for errors that would keep it from working, but can't seem to find any. All appears well, except the menu will not dropdown. Does anyone have any tips?
Here is my code as snippet:
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>Catalog
</li>
<li>Calendar
</li>
<li class="dropdown">
Library Information
<div class="dropdown-content">
Children's Programs
Adult Programs
Help Services
Other Services
Library Policies
</div>
</li>
<li>Contact
</li>
</ul>
Thank you for any advice!

Answer 1

Well, the dropdown-menu actually shows up :)
But we cannot see it, because your menu is
overflow: hidden;
If you delete this css-row, your menu will work:
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>Catalog
</li>
<li>Calendar
</li>
<li class="dropdown">
Library Information
<div class="dropdown-content">
Children's Programs
Adult Programs
Help Services
Other Services
Library Policies
</div>
</li>
<li>Contact
</li>
</ul>

Answer 2

ul{
margin:0px;
padding:0px;
list-style:none;
}
ul li{
background-color:#5BC8C3;
width:150px;
height:50px;
float:left;
line-height:50px;
color:#0FC;
text-align:center;
}
ul li a{
color: #FFF;
text-decoration:none;
display:block;
}
ul li a:hover{
background-color:#F7f7f7;
}
<ul>
<li>Home</li>
<li>Catalog</li>
<li>Calender</li>
<li>Library Information
<ul>
<li>Children's Programs</li>
<li>Adult Programs</li>
<li>Help Services</li>
</ul>
</li>
<li>Contact</li>
</ul>