[英]CSS for sub-menu on navigation bar not working
I am working on a site and have created a navigation bar with sub-items but I am not getting these sub-items display on hover. 我正在一个网站上工作,并创建了一个带有子项目的导航栏,但我没有在悬停时显示这些子项目。 Here's my HTML and CSS code for the navigation bar:
这是导航栏的HTML和CSS代码:
<div class="collapse navbar-collapse" id="spi-primary-nav">
<ul class="nav navbar-nav">
<li id="menu-item-9265" class="home-link menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-9001 current_page_item menu-item-9265">
<a href="index.html">Home</a>
</li>
<li id="menu-item-9004" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9004 ">
<a href="Default.aspx">Store</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>
</ul>
</div>
The CSS is here: CSS在这里:
.navbar-nav > li > ul {
display: none;
position: absolute;
}
.navbar-nav > li > ul:hover {
display:block;
}
Here is the live link of the site in case someone wants to inspect the elements using Firebug: http://webcalendar.pcprosinc.com/Home 以下是该网站的实时链接,以防有人想要使用Firebug检查元素: http : //webcalendar.pcprosinc.com/Home
Please help me out 请帮帮我
You got your :hover
in the wrong place. 你有你的
:hover
在错误的地方:hover
。
It should be in the li
instead of the ul
它应该在
li
而不是ul
Try this instead: 试试这个:
.navbar-nav > li:hover > ul {
display:block;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.