ナビゲーションメニューの効果を達成するために、ネイティブ

<！DOCTYPE HTML > 
< HTML LANG = "ZH" > 
< 頭> 
    < メタ文字コード= "UTF-8" > 
    < メタ名= "ビューポート" 
          コンテンツ= "幅=装置幅、ユーザースケーラブル=なし、初期規模= 1.0、最大規模= 1.0、最小スケール= 1.0" > 
    < メタHTTP-当量= "X-UA-互換" コンテンツ= "IE =縁" > 
    < タイトル>原生实现导航菜单栏效果</ タイトル> 
    <：0PX ; パディング：0PX 。} { 
            テキスト装飾：なし。
            色：ブラック。} 
        DD：ホバー{ 
            背景：＃38F 。
            テキスト装飾：なし; 
            色：#FFF ; } 
        DL { 背景：#FFF 。表示：なし; margin-left ：
        
        -10px ; マージントップ：10pxの; 
            幅：70ピクセル; フォントサイズ：15ピクセル; 
            国境：1pxの固体＃1 d1d1d1 ; z屈折率：302 。-webkit-ボックスシャドウ：1pxの1pxの5pxの＃d1d1d1 ; 
            変換起源：50％0 ; 
            -webkit-アニメーション：ゲイリー.5s使いやすさで。
            トランジション：すべての.3s 。} 
        DD { 
            ディスプレイ：ブロック; 
            テキスト整列：左; 
            マージン：0重要！。
            パディング：0 9px ; 
            行の高さ：26px ; 
            テキスト装飾：なし; 
        } 
        -webkit-キーフレームゲイリー@ { 
            0％{変換：スケール（1,0） 。} 
            25％{ 変換：スケール（1,1.2） 。} 
            50％{ 変換：スケール（1,0.85） 。} 
            75％{ 変換：スケール（1,1.05） 。} 
            100％{ 変換：スケール（1,1） 。} 
                                    } 
</ スタイル> 
</ ヘッド> 
< ボディ> 
< DIV ID = "D1" スタイル= "マージン左：は50px;表示：インラインブロック" > 选项卡
     < DL スタイル= "" > 
        < DD > <onclickの= "tiyan（この）" >菜单1 </ A > </ DD > 
        < DD > < HREF = "" のonclick = "tiyan（この）" >菜单2 </ A > </ DD > < DD > < HREF = "" のonclick = "tiyan（この）" >菜单3 </ A > </ DD > < DD > < HREF = "" のonclick =」tiyan（この） " >メニュー。4 </ A > </
        
        DD > 
    </ DL > 
</ divの> 

< スクリプトSRC = "JS / jqueryの- 3.3.1.js" > </ スクリプト> 
< スクリプト> 
    VAR $ D1 = $（' ＃d1を' ）; 
    $のd1.mouseover（関数（）{
         VAR $ DLS = $（' DL ' ）; 
        $のdls.css（" 表示" 、" ブロック" ）; 
    }）; 
    $ d1を。（）{
         VAR $ DLS = $（' DL ' ）。
        $のdls.css（" 表示" 、" なし" ）; 
    }）; 
    関数tiyan（OBJ）{ 
        アラート（' 执行了' + obj.text）
    } 
</ スクリプト> 
</ ボディ> 
</ HTML >

コードとして