html/javascriptのホバーメニュー

Question

私は既にページの上部にナビゲーションメニューを持っていますが、これらのオプションのいずれかにカーソルを置くと、サブメニューを展開しようとしています。私の最初のアイデアは、単にそれがNAVオプションがオーバー推移したのですが、その後、私はサブメニューが、すぐに消えてしまうことに気づいたかどうかに基づいて、それを隠す/など

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

とショーのようなコードの「DIV」のセクションを持っていることでした私はそれに対応するナビゲーションメニューボタンから私のマウスを取った。誰もがオプションの上にマウスを置く方法を知っている、メニューを持ってきて、そしてそれが消えることなくサブメニューにアクセスできるようにすることができますか？

Answer 1

サブメニューが親メニュー項目の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メニュー」を検索すると、膨大なリソースが必要になります。

Answer 2

これを行うための通常の方法は

<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; }