I have been attempting to create a hoverable dropdown menu, but I am encountering an issue where the items of the dropdown are overlapping. Despite my efforts to adjust the CSS classes, I have not been successful in fixing this problem.
Additionally, I have tried modifying the display settings for the links with no success. Below is the code snippet that I have written:
<style>
#menu
{
margin:0;
font-size: 30px;
border-bottom: 1px solid;
text-align: center;
}
#menu a
{
color:#900;
text-decoration:none;
}
#menu .subitem a{
display: block;
padding: 12px 16px;
z-index: 1;
background-color: #f1f1f1;
border-bottom: 1px solid;
}
#menu a:hover
{
text-decoration:underline;
}
.item{
position: relative;
display: inline-block;
border-right: 0.5px solid;
padding-right: 30px;
padding-left: 30px;
}
.subitem{
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
left: 0;
z-index: 1;
}
#menu .item:hover .subitem{
display: block;
}
</style>
<div id="navWrapper">
<ul id="menu">
<li class="item"><a href="#">Small Things</a>
<ul class="submenu">
<li class="subitem"><a href="#">Gnomes</a></li>
<li class="subitem"><a href="#">Fairies</a></li>
<li class="subitem"><a href="#">Elves</a></li>
<li class="subitem"><a href="#">Leprechauns</a></li>
</ul>
</li>
<li class="item"><a href="#">Big Things</a>
<ul class="submenu">
<li class="subitem"><a href="#">Loch Ness Monster</a></li>
<li class="subitem"><a href="#">Ogres</a></li>
<li class="subitem"><a href="#">Giants</a></li>
<li class="subitem"><a href="#">Dragons</a></li>
</ul>
</li>
</ul>
</div>
I am aiming to achieve the desired display of each item when hovering with the mouse as shown in this image.