1

我正在尝试制作自己的导航栏，以更好地了解如何创建良好的导航栏。当悬停在链接上时，我已经创建了栏以及更改背景，但是当悬停在标签 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>
4

1 回答 1

0

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

<ul> 
    <li><a href="#">LinkHere</a>
        <div class="subcategory">Hey</div></li>
</ul>
于 2012-10-03T01:51:50.333 回答