html - 使用CSS在悬停时显示/隐藏下拉菜单

Question

所以我得到了以下代码，我基本上是在尝试显示额外的链接，以便在您将鼠标悬停在“我的帐户”选项上时点击。

HTML:

    <div id="wrapper">
<div id ="banner"><asp:Image ID="Image1" runat="server" Height="269px" ImageUrl="~/" Width="100%" /></div>
             <div id ="navigation">
                 <ul id="nav">
                    <li><asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Security/Default.aspx">Home</asp:HyperLink></li>
                    <li><asp:HyperLink ID="HyperLink2" runat="server">Using the System</asp:HyperLink></li>                   
                     <li><asp:HyperLink ID="HyperLink3" runat="server">My Account</asp:HyperLink>
                         <ul id ="test">
                               <li><a href="#">Hyperlink 2.1</a> </li>
                         </ul>
                         <li>
                 </ul>
             </div>

CSS:

    #navigation {
    height: 45px;
    background: linear-gradient(to top, #c2bcb5, #ffffff);
}

#nav li{
    display: block;
    list-style: none;
    text-align: center;
}

#nav ul li:hover #test{
    visibility:visible;
}
#nav ul {
    display: none;
    list-style: none;  
}
#test ul {
    position:absolute;
    left:0;
    width:125px;
    visibility: hidden;
}

这似乎没有做任何事情，有什么想法可以改变吗？

Answer 1

 #navigation {
    height: 45px;
    background: linear-gradient(to top, #c2bcb5, #ffffff);
}

#nav li{
    display: block;
    list-style: none;
    text-align: center;
}

#nav li:hover #test{
    display:block;
}
#nav ul {
    display: none; /*  this property must be changed on hover  */
    list-style: none;  
}
#test ul {
    position:absolute;
    left:0;
    width:125px;

}

演示:http://jsfiddle.net/k9f3s4z5/

对于#nav ul，您已将显示属性设置为无，但您刚刚更改了悬停时的可见性。另外，右选择器是:#nav li:hover #test，没有ul，因为#nav 实际上是ul id。 (而且，#test ul 和#nav ul 不应该将 css 分开，如果我是对的，它是同一个元素？)