html/javascript懸停菜單

我已經在我的頁面頂部有一個導航菜單，但現在我試圖展開一個子菜單，當我將鼠標懸停在這些選項之一上時。我最初的想法是簡單地有像這樣的html/javascript懸停菜單

<div id= "expanded_menu"> <!-- sub menu option --> </div>

，並顯示代碼的「格」一節/隱藏它基於它是否是導航選項被上空盤旋，但後來我意識到，子菜單會立即消失因爲我將鼠標從相應的導航菜單按鈕上取下。有誰知道懸停在選項上的方法，是否提供菜單，然後能夠訪問子菜單而不會消失？

來源

2012-02-18 Zack

使用已經開發和實施的腳本和/或樣式。例如，[Suckerfish]（http://www.htmldog.com/articles/suckerfish/）。 – 2012-02-18 16:24:15

你只能用CSS實現這個，不需要JavaScript。試試這個教程http://www.seoconsultants.com/css/menus/tutorial/下面是一個工作示例：http://ago.tanfa.co.uk/css/examples/menu/hs7.html – 2012-02-18 16:24:39

只要子菜單嵌套在父菜單項的div中，您的方法就可以工作。所以你的HTML結構是：

<div class="main_menu_item">MainItem 
    <div class="sub_menu_item">Item1</div> 
    <div class="sub_menu_item">Item2</div> 
</div>

然後你仍然懸停在主項目上時，懸停在子項上。

然而，我個人會在CSS中實現這一切 - 搜索「CSS菜單」，你會發現很多資源。

來源

2012-02-18 16:22:44 Trent

感謝一堆！ – Zack 2012-02-18 16:24:48

通常的方式做，這是嵌套列表...

<ul id="main-menu"> 
    <li> 
     First menu item 
     <ul class="sub-menu"> 
      <li>Sub menu item</li> 
      ... 
     </ul> 
    </li> 

    <li>Second menu item</li> 
    ... 
</ul>

，並使用以下CSS。

.sub-menu { display: none; } 
#main-menu li:hover .submenu { display: block; }

來源

2012-02-18 16:25:50 gargantuan

html/javascript懸停菜單

回答

相關問題