打开div时悬停在li标签

我想让自己的导航栏获得更好的理解来创建良好的导航栏。当鼠标悬停在链接上时，我创建了栏以及更改背景，但是当悬停在标签li上时，我无法添加下拉菜单（子菜单）。我为子菜单的内容创建了一个框，但由于某些原因无法显示。我在下面列出了我的代码。我想要的是，当班级子类别在li标签悬停时显示。另外，如果我的代码格式不正确，我会提前道歉。这是我在stackoverflow上的第一个问题。打开div时悬停在li标签

#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>

来源

2012-10-03 user1715804

你.subcategory元素不是li的孩子，这就是为什么他们将不会出现。

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

来源

2012-10-03 01:51:50 cimmanon

打开div时悬停在li标签

回答

相关问题