I'm currently in the process of setting up multiple drop down menus within a navigation element. The issue I'm facing is that when a user hovers over the menu items, the displayed elements appear below the first item instead of the selected one.
Feel free to check out the code I've created on CodePen:
https://codepen.io/robinreborn/pen/BxRKEa
This is the HTML code:
<nav class="header-nav">
<div class="dropdown">
<a href="/about-the-company.php">About the Company</a>
<div class="dropdown-content">
<a href="/our-team.php">Management Team</a>
</div>
</div>
<div class="dropdown">
<a href="/the-science.php">The Science</a>
<div class="dropdown-content">
<a href="/what-it-tests.php">What is tests?</a>
<a href="/select-research.php">Select Research?</a>
</div>
</div>
<div class="dropdown">
<a href="/products.php">Products</a>
<div class="dropdown-content">
<a href="/our-assessments">Our Assessments</a>
<a href="/holland-interest-profiler">Holland Interest Profiler</a>
<a href="/decision-making-instrument">Decision Making Instrument</a>
<a href="/perspective-taking-instrument">Perspective Taking Instrument</a>
<a href="/admin-review">Admin Review</a>
</div>
</div>
<a href="/blog.php">Blog</a>
<a href="/contact.php">Contact Us</a>
<a href="/login.php">Login</a>
</nav>
And here is the CSS code for the dropdown functionality:
.dropdown {
display:inline;
}
.dropdown:hover .dropdown-content {
display: block;
}`
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
padding-top: 1em;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
display: block;
text-align: left;
position: relative;
clear: both;
}