如何使鼠标悬停时下拉菜单保持打开状态

时间:2014-04-29 16:12:47

标签: html css drop-down-menu

当我点击“关于”菜单时,只要我停止在关于菜单上的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 &amp; conditions</a>
</div>

1 个答案:

答案 0 :(得分:1)

以下是您的操作方法:FIDDLE

要注意的三件事:

1)<li>应该是<ul>的元素,而不是<div>

2)将子菜单与相关父菜单对齐的最简单方法是让他成为该父菜单的直接子项,并将父位置设置为relative,将子项设置为absolute,这样你将孩子left设置为0它会完美地点亮。

3)制作菜单栏的最简单方法是使用用户列表<ul>并将其列表项的显示设置为inline以使其成为水平。