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