Question

我对CSS编码很新。我在下拉菜单中遇到问题，当鼠标移到li项目的ul部分之外时菜单li消失了。我希望鼠标悬停在li项目上，但菜单li消失了.. 这是我的代码：

HTML code：

<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

CSS下拉菜单消失

1 个答案: