所以我得到了以下代码,我基本上是在尝试显示额外的链接,以便在您将鼠标悬停在“我的帐户”选项上时点击。
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;
}
这似乎没有做任何事情,有什么想法可以改变吗?
最佳答案
#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 分开,如果我是对的,它是同一个元素?)
关于html - 使用CSS在悬停时显示/隐藏下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26833357/