CSS 드롭 다운 메뉴가 사라집니다.

Question

CSS 코딩이 처음입니다. 마우스가 li 항목 위의 ul 부분 밖으로 이동할 때 메뉴 li가 사라지는 드롭 다운 메뉴에 문제가 있습니다.

HTML 코드 :

<asp:LinkButton runat="server" ID="lbtn" Text="Sort By Date" CssClass="lbtFilter"> 
    <ul> 
     <li>List item 1</li> 
     <li>List item 2</li> 
    </ul> 
</asp:LinkButton> 

CSS 코드 :

.lbtFilter { 
    text-decoration:none; 
    margin-left:27px; 
    position:relative; 
    z-index:9999; 

} 
.lbtFilter ul { 
    display:none; 
    list-style-type:none; 
    margin-left:20px; 
    width:160px; 
    height:60px; 
} 
.lbtFilter:hover > ul { 
    display:block; 
} 

내가 이것을 추가하는 시도 나 마우스가 리 항목에 마우스를하고 싶지만, 메뉴 리 .. 여기 사라은 내 코드입니다 CSS에 연결했지만 작동하지 않음 :

.lbtFilter:hover ul >li{ 
    display:list-item; 
} 

내 실수는 어디에 표시 할 수 있습니까?

Answer 1

HTML

<a id="lbtn" class="lbtFilter" onmouseover="me()"> 
List 
</a> 
<ul id="mylist" class="ulist"> 
<li>List item 1</li> 
<li>List item 2</li> 
</ul > 

CSS

.lbtFilter { 
text-decoration:none; 
margin-left:27px; 
position:relative; 
z-index:9999; 
} 
.ulist { 
margin-left:20px; 
width:160px; 
height:60px; 
display:none; 
} 
.ulist li:hover{ 
color:red; 
} 

간단한 자바 스크립트 기능 :

<script> 
function me() {   
document.getElementById("mylist").style.display = "block"; 
} 
</script> 

DEMO