Issue in overlapping of items in hoverable dropdown menu - html

Question

I am trying to make a hoverable dropdown menu and the items of the dropdown are overlapped. I don't know how the CSS should be, but I tried to modify each class, but still doesn't work.
I also tried to modify the display of links, but that doesn't work. Here is the code I made:
<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">Small Things
<ul class="submenu">
<li class="subitem">Gnomes</li>
<li class="subitem">Fairies</li>
<li class="subitem">Elves</li>
<li class="subitem">Leprechauns</li>
</ul>
</li>
<li class="item">Big Things
<ul class="submenu">
<li class="subitem">Loch Ness Monster</li>
<li class="subitem">Ogres</li>
<li class="subitem">Giants</li>
<li class="subitem">Dragons</li>
</ul>
</li>
</ul>
</div>
I want to display properly each item when I hover with the mouse like it is in this
image.

Answer 1

You confused your .submenu with .subitem:
#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; <- get rid of that */
/* position: absolute; <- get rid of that, otherwise all your subitems will be in the top left corner */
background-color: #f1f1f1;
min-width: 160px;
left: 0;
z-index: 1;
}
.submenu {
position: absolute; /* <- put it here */
display: none; /* <- put it here */
list-style-type: none;
left:-40px;
top: 30px;
}
#menu .item:hover .submenu {
display: block;
}
<div id="navWrapper">
<ul id="menu">
<li class="item">Small Things
<ul class="submenu">
<li class="subitem">Gnomes</li>
<li class="subitem">Fairies</li>
<li class="subitem">Elves</li>
<li class="subitem">Leprechauns</li>
</ul>
</li>
<li class="item">Big Things
<ul class="submenu">
<li class="subitem">Loch Ness Monster</li>
<li class="subitem">Ogres</li>
<li class="subitem">Giants</li>
<li class="subitem">Dragons</li>
</ul>
</li>
</ul>
</div>