html - 将鼠标悬停在 li 标签上时打开 div

Question

我正在尝试制作自己的导航栏，以便更好地理解如何创建好的导航栏。当鼠标悬停在链接上时，我已经创建了栏并更改了背景，但是当鼠标悬停在标签 li 上时，我无法添加下拉菜单(子菜单)。我为子菜单创建了一个内容框，但由于某种原因无法显示。我在下面包含了我的代码。我想要的是在 li 标签悬停时显示类子类别。另外，如果我的代码格式不正确，我提前道歉。这是我关于 stackoverflow 的第一个问题。

#navbar ul {
list-style-type:none;
color: #000;
padding: 0px;
text-align: center;
}
li:hover {
background-color: #0C0;
padding: 16.5px .1px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.subcategory {
display: none;
width: 100px;
height: auto;
background-color: #FC0;
color: #03F;
position: absolute;
top: 100px;
}
li:hover .subcategory {
display: block;
}
#navbar {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-color: #FC0;
float: left;
font-family: Arial, Helvetica, sans-serif;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
padding: 0 1.5em;
text-decoration: none;
}
<div id="navbar">
<ul> 
    <li><a href="#">LinkHere</a></li>
        <div class="subcategory">Hey</div>
    <li><a href="#">LinkHere</a></li> 
    <li><a href="#">LinkHere</a></li> 
    <li><a href="#">LinkHere</a></li> 
    <li><a href="#">LinkHere</a></li> 
    <li><a href="#">LinkHere</a></li> 
    <li><a href="#">LinkHere</a></li> 
    <li><a href="#">LinkHere</a></li> 
    <li><a href="#">LinkHere</a></li> 
</ul> 
</div>

Answer 1

您的 .subcategory 元素不是 li 的子元素，这就是它们不会出现的原因。

<ul> 
    <li><a href="#">LinkHere</a>
        <div class="subcategory">Hey</div></li>
</ul>