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>