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; 
} 

一個簡單的JavaScript 功能：

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

DEMO