CSS 下拉菜单消失

Question

我对 CSS 编码很陌生。我在使用下拉菜单时遇到问题，当鼠标移到 li 元素上的 ul 部分之外时，菜单 li 会消失。我想让鼠标悬停在 li 元素上，但是菜单 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