Sarah Sarah - 1 month ago 6
CSS Question

Dropdown Menu Not Working?

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><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>





Thank you for any advice!

Answer

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><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>

Comments