Recently, I created a navigation bar with various links using unordered lists and anchor tags. However, I encountered an issue with implementing dropdown functionality for specific links. Despite following the dropdown example from w3schools, my links seem to be visually overlapping instead of displaying properly. Here is the code snippet:
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}<nav class="main-nav-container">
<ul>
<div class="dropdown">
<li>
<a href="#">Climb</a>
<div class="dropdown-content">
<a href="">Link 1</a>
<a href="">Link 2</a>
<a href="">Link 3</a>
</div>
</li>
</div>
<li><a href="#">News</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Donate</a></li>
<li><a href="#">Merchandise</a></li>
</ul>
</nav>When I previewed it, I noticed that the links appeared crowded and not separated as desired. My goal was to have hover-triggered dropdowns showing additional links below the main navigation menu items. Instead, the dropdown content is displaying inline with the navigation links. What could be causing this issue in my code?