Question

所以我已经获得了以下代码，并且我基本上只是在您将鼠标悬停在＆＃34;我的帐户＆＃34;选项。

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，您已将display属性设置为none，但您刚刚更改了悬停时的可见性。另外，右选择器是：#nav li：hover #test，没有ul，因为#nav实际上是ul id。（并且，＃test ul和#nav ul应该不应该分开css，如果我是对的，它是相同的元素？）

Answer 2

您需要一种使用“我的帐户”定位列表元素的方法，并使用：hover选择器。一种可能的解决方案是使用第n个子选择器，如下所示：

#test ul {
    position:absolute;
    left:0;
    width:125px;
    /*  Changed display instead of visibility so test ul doesn't take up space on the page */
    display: none;
}

/* When user hovers over the 3rd li element, the css code for the ul with the id test takes effect */
li:nth-child(3):hover ul#test {
    display: block;
}

Answer 3

下面是将代码简化为基础知识生成的代码 - 稍后添加额外的部分。

我相信这个css有你想要的行为。

HTML：

<div id="nav">
    <ul>
        <li>Home</li>
        <li>Using the System</li>
        <li>My Account
            <ul id="test">
                <li>Hyperlink 2.1</li>
            </ul>
        </li>
    </ul>
</div>

CSS：

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

使用css在悬停时显示/隐藏下拉菜单

3 个答案: