このメニューをMultiLevelにするには？

Question

私はちょうどダウンメニューこのクールな水平ドロップが見つかりました：

http://css-tricks.com/examples/DiggHeader/#

をそして、私はそれを使用するのが大好きだが、私はマルチレベルが必要です。しかし、それを行う方法の手がかりではありません。マルチレベルメニューの作成方法に関するチュートリアルを検索しましたが、ダウンロードとデモプレビューのみが見つかりました。 ：-S

マルチレベルの上にメニューを作成する方法についての提案はありますか？

あなたは

Answer 1

私はCSS-Tricksが大好きですが、これはいくつかの点で可能です。 これについて簡単に説明します。

HTML MarkUp;

<div id="nav"> 
    <ul> 
    <li> 
     <a href="...">Technology</a> 
     <ul> 
     <li><a href="...">Apple</a> 
      <ul> 
      <li><a href="...">iPhone</a></li> 
      </ul> 
     </li> 
     <li><a href="...">Design</a></li> 
     </ul> 
    </li> 
    </ul> 
</div> 

お知らせ<a href="...">Apple</a>隣内<ul>。

CSS専用のメソッド。

<style> 
    #nav ul li ul{ 
    display:none; 
    } 
    #nav ul li:hover>ul{ 
    display:block; 
    } 
</style> 

このCSSは、ユーザーのホバーが要素の上に表示されるまで、表示する必要のない要素を非表示にします。ホバー上に表示されます。

この要素のホバーは、効果を変更したい場合にJavaScriptで行うことができます。

jQueryメソッド;

<style> 
    #nav ul li ul{ 
    display:none; 
    } 
</style> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script> 
    $("#nav ul li").each(function(){ 
    $(this).mouseenter(function(){ 
     $(this).find("ul:first").show(); 
    }).mouseleave(function(){ 
     $(this).find("ul:first").hide(); 
    }); 
    }) 
</script> 

Answer 2

あなたは、私はjQueryのために作らminimalistic navigation pluginをチェックアウトすることができますありがとうございました。おそらく、そのリンクのように動作して、ulリストの相対的な絶対的な位置を使用するようにCSSを変更することができます。