Instead of placing the dropdown trigger in a list and the dropdown menu in a nested list, I prefer creating a self-contained dropdown component with a hidden nested list within the parent visible list. This setup keeps things organized and tidy.
To achieve this, you can create a nested list with display: none and then use CSS to apply display: block styling on hover of the parent list item. While the dropdown menu can be shown directly under the list item, I prefer styling it to be positioned absolutely below the content upon hover for a more visually appealing effect.
This approach allows the nested list to be visible when hovering over the parent list item or button. Note that the button styling is inspired by the example on the listed w3 page - https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_button.
I have also simplified the structure by removing unnecessary layers of nested divs for this solution.
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown-menu {
list-style: none
}
.dropdown-menu-item {
position: relative
}
.dropdown-menu-list {
display: none;
border: solid 1px #e1e1e1;
background: #fff;
position: absolute;
left: 0;
top: 50px;
padding:0;
list-style: none
}
.dropdown-menu-list-item {
background: #fff;
padding: 8px 16px;
}
.dropdown-menu-list-item:hover {
background: #fafafa;
}
.dropdown-menu-list-item a,
.dropdown-menu-list-item:hover a{
text-decoration: none;
display: block;
cursor: pointer
}
.dropdown-menu:hover .dropdown-menu-list ,
.dropdown-menu-item:hover .dropdown-menu-list:hover{
display: block;
}
<div class="menu-container">
<ul class="dropdown-menu">
<li class="dropdown-menu-item">
<button class="dropbtn">Dropdown</button>
<ul class="dropdown-menu-list">
<li class="dropdown-menu-list-item"><a id="index" href="index.html">Home</a></li>
<li class="dropdown-menu-list-item"><a id="gamePage" href="gamePage.html">Game</a></li>
<li class="dropdown-menu-list-item"><a id="gameDesignPage" href="gameDesignPage.html">Game Design</a></li>
<li class="dropdown-menu-list-item"><a id="devRolesPage" href="devRolesPage.html">Developer Roles</a></li>
<li class="dropdown-menu-list-item" class="float-right"><a id="about" href="about.html">About</a></li>
</ul>
</li>
</ul>
</div>