JQ 2つのメニュー/プルダウンメニューを達成

〜直接コードに、難しいことではありません

コメントを書きます

<!DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <メタ名= "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1.0"> 
    <メタHTTP-当量= "X-UA-互換性のある"コンテンツ= "IE =エッジ"> 
    <タイトル>ドキュメント</ TITLE> 

    <スタイル> 
    * {マージン:0;パディング:0 ;} 
    UL {リスト - スタイル:なし。 }
     / * 清除所有UL的小圆点* / 
    
    .banner { 
        マージン:は50px自動。幅:333px; 高さ:30px; 
        背景:URL( "画像/ bg.jpg")NO- 繰り返し。
    } 
    / * すべてのLiの背景画像を追加* / 
    .banner > UL> 李{
         フロート:左;マージン:0 5pxのを;位置:相対; 
    } 
    / * ULはDIVスタイルのLiの下に設けられた* / 
    A { 
        表示:ブロック;幅:100ピクセル;高さ:30px; 
        テキスト - 装飾:なし;色:黒; 
        ライン -height:30px;テキストベースが並ぶ=左:センター; 
    } 
    / * 設定下線のスタイルを削除* / 
    .second { 
        位置:絶対に、トップ: 30px;表示:なし; 
    / * トップ:30px;メニュー30pxので高さは、トップカバーメニューが0になりますである* / 
    } 
    .second {リー
        パディング:5pxの13px; 
    }
     </スタイル> 
</ HEAD> 
<BODY> 
    
    <DIV CLASS = "バナー"> 
        <UL> 
            <LI> 
                。<a href="">の</a>のメニュー1 
                    <= ULクラス"SECOND"> 
                    <LI>二次メニュー。1 </ LI> 
                    <LI>二次メニュー。1 </ LI> 
                    <LI>二次メニュー。1 </ LI> 
                    </ UL> 
               
            </ LI> 

            <LI> 
                <A href = "">メニュー</a>の2 
                    <ULクラス= "SECOND"> 
                    <李>二次メニュー2 </ LI> 
                    <LI>の2つのメニュー2 </ LI> 
                    <LI>の2つのメニュー2 </ LI> 
                    </ UL>
              MouseEnter( 関数(){ 
            $(この).find( "UL")、CSS( "表示"、 "ブロック" ); 
        }); //

                

        李の下に表示UL二次メニューにマウスの前のメニューのli div要素にイベントをサインアップ 
        $( "バナー> UL>李")。MouseLeave(関数(){ 
            $(この).find(「UL ")の.css("表示を実行する""なし」); 
        }); 
        // divの中に前のメニュー李登録されたイベントには、ULマウスは、二次メニュー李の下に隠れて左

    });
     </ SCRIPT> 
< / BODY> 
</ HTML>

おすすめ

転載: www.cnblogs.com/sandraryan/p/11070136.html