当我点击“关于”菜单时,只要我停止在关于菜单上的hoverig,下拉就不会保持打开状态。如何让它保持开放?
CSS
#nav-line2 .subMenu{
position:absolute;
z-index:999;
list-style:none;
display:none;
padding-left:441px;
}
#about:hover + .subMenu , .subMenu:hover {display:block;}
HTML
<div id="nav-line2" style="float:left">
<a class="navlink" href="/whatwedo">what we do</a>
<a class="navlink" href="/communities">communities</a>
<a class="navlink" href="/catalog">gift catalog</a>
<a class="navlink" href="/studentprofiles">student profiles</a>
<a class="navlink" id="about" href="/aboutme">about</a>
<div class="subMenu">
<li><a class="navlink" href="/about">Board of Directors</a></li>
<li><a class="navlink" href="/accesgovernance">Structure & Governance</a></li>
</div>
<a class="navlink" href="/termsconditions" style="padding-left:10px">terms & conditions</a>
</div>
答案 0 :(得分:1)
以下是您的操作方法:FIDDLE
要注意的三件事:
1)<li>
应该是<ul>
的元素,而不是<div>
2)将子菜单与相关父菜单对齐的最简单方法是让他成为该父菜单的直接子项,并将父位置设置为relative
,将子项设置为absolute
,这样你将孩子left
设置为0
它会完美地点亮。
3)制作菜单栏的最简单方法是使用用户列表<ul>
并将其列表项的显示设置为inline
以使其成为水平。