Выпадающее меню 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; 
} 

Я попытался добавить это line к 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>