'HTML Dropdown Navbar not displaying

I'm trying to add a navbar with a dropdown for more pages when hovered over but it's not showing up when you hover. My code is below:

ul {
    position: -webkit-sticky; /*code for safari only*/
    position: sticky;
    top: 0;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #3c86a6;
    background-color: #AFD4E5;
    border-radius: 5px;
}

li {
    float: left;
    border-radius: 10px;
}

li a, .dropbtn {
    display: block;
    color: #4a4a4a;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: 'Oswald', sans-serif;
}

li a:hover:not(.active) {
    background-color: #245164;
    color: #AFD4E5;
    font-family: 'Oswald', sans-serif;
}

li a.active {
    color: aliceblue;
    background-color: #245164;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: #245164;
    color: #AFD4E5;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
    display: block;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li class="dropdown">
        <a href="#" class="dropbtn">About Maptrix</a>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>
      <li><a href="#">WiseGuide</a></li>
      <li><a href="#">Finance</a></li>
      <li><a href="#">Documentation</a></li>
    </ul>
  </nav>
</body>
</html>

I feel like this should be an easy fix but I've spent ages on it and can't figure it out even after following lots of other posts so hopefully someone can spot my mistake!

Thanks!

htmlcss


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions