JQは、Webフロントエンドのプルダウンメニューを使用して実装しました

レンダリングを実現します：

機能：メニューレベルをクリックして、対応する2つのドロップダウンメニューが表示されます

実装コード：

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <META NAME = "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1.0"> 
    <タイトル>よると</ TITLE> 
    <スタイル> 
        * { 
            マージン：0PX。
            パディング：0 ; 
        } 
        .nav { 
            リストスタイル：なし。
            幅：300ピクセル ; 
            マージン：100pxに自動 ;
        } 
        .nav>李 { 
            ボーダー：1ピクセル固体＃000000。
            行の高さ：35px ; 
            border-bottom：なし。
            位置：相対 ; 
            テキスト整列：センター ; 
        } 
        .nav>のLi：最後の子 { 
            ボーダー底：1ピクセル固体＃000000。
            border-bottom-右半径：10pxの ; 
            border-bottom-左半径：10pxの; 
        } 
        .nav>のLi：最初の子 { 
            ボーダー右上半径：10pxの。
            border-top-左半径：10pxの ; 
        } 
        .nav> LI> UL { 
            リストスタイル：なし。
            背景：＃f8615a。
            表示：なし ; 
        } 
        .nav> LI> UL>のLi { 
            ボーダートップ：1ピクセル固体＃1 ffb2a7。
            行の高さ：35px ; 
        }
        .nav> LI> UL>のLi：ホバー { 
            背景：＃b80d57。
        } 
        .nav> LI>スパン { 
            背景：URL（ "./ IMG /下拉前.PNG"）なしリピート中心センター ; 
           表示：インラインブロック。
            幅：32PX ; 
            高さ：32PX ; 
            位置：絶対 ; 
            右：10pxの ; 
            トップ：5pxの ; 
        } 
    </スタイル> 
    <スクリプトSRC =」./ libに/ jqueryの-1.11.3 / jqueryの-1.11.3 / jquery.min.js "> </ SCRIPT> 
        <SCRIPT> 
            $（関数（） { 
                $（"。NAV >李"）をクリックします（関数（）{ 
                    変数$サブ= $（この）.children（"サブ"）; 
                    $ sub.slideDown（1000）; 
                    。varがotherSub = $（この）.siblings（）子ども（ ".SUB"）; 
                    otherSub.slideUp（1000）;
                 } ）
            }）。
            </ SCRIPT> 
</ head> 
<body> 
    <ULクラス= "NAV"> 
        <LI>一级菜单一
            <ULクラス= "サブ"> 
        <LI>メニュー2 
            <ULクラス= "サブ"> 
                <LI> 2つのメニュー</ LI> 
                <LI> 2つのメニュー</ LI> 
            </ UL> 
        </ LI> 
        <LI>メニュー3 
            <ULクラス= "サブ"> 
                <LI> 2つのメニュー</ LI> 
                <LI> 2つのメニュー</ LI> 
            </ UL> 
        </ LI> 
        <LI>メニュー4 
            <ULクラス= "サブ"> 
                <LI> 2つのメニュー</ LI> 
                <LI> 2つのメニュー</ LI> 
            </ UL> 
        </ LI> 
    </ UL>
</ BODY> 
</ HTML>

JQは、Webフロントエンドのプルダウンメニューを使用して実装しました

おすすめ