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>

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

1 个答案: