I recently implemented a CSS dropdown menu example that I found on a website, but it's not working with my code. I double-checked for typos but couldn't find any.
Even when I tried to directly copy the code and replace the content with my own, it still didn't work as expected.
Could someone provide guidance on how to troubleshoot this? Thank you :)
Here is a snippet of my HTML code:
<nav>
<ul>
<li><a href="#">home</a></li>
<li><a class ="active" href="#">gallery</a></li>
<li class="dropdown"><a href="javascript:void(0)" class="dropbtn">Categories</a>
<div class="dropdown-content">
<a href="#">Nature</a>
<a href="#">Portraits</a>
<a href="#">Abstract</a>
</div>
</li>
</ul>
</nav>
Highlighted is just the navigation bar section.
And here is the corresponding CSS code:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
font-size:3em;
position:sticky;
top:0;
color:blue;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active), .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: gray;
min-width: 160px;
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: red;
}
.dropdown:hover .dropdown-content {
display: block;
}
.active{
background-color: blue;
}