如何在懸停時使下拉菜單保持打開狀態

當我在關於菜單中單擊時，下拉菜單在我停止關於其消失的關於菜單的菜單時不會保持打開狀態。如何讓它保持開放？如何在懸停時使下拉菜單保持打開狀態

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>

來源

2014-04-29 SoftDev

您的HTML無效。 'li'必須是'ul'的子代＃ –

看一看#id ul li：懸停ul li：懸停並且也是css選擇器> –

您需要使用jquery切換它，css：hover只能在hover – gardni

這裏是你如何做到這一點：FIDDLE

3事情需要注意：

1）<li>應該是一個元素<ul>而不是<div>

2）對齊子菜單中的相關父菜單最簡單的方法就是讓他父菜單的直接子和父位置設置爲relative和孩子的absolute，這樣當你設置的孩子left到0它將完美地熄滅。

3）製作菜單欄的最簡單方法是使用用戶列表<ul>並將其列表項目的顯示設置爲inline以使其水平。

來源

2014-04-29 16:34:54 Banana

如何在懸停時使下拉菜單保持打開狀態

回答

相關問題