JS は京東淘宝_javascript スキルを模倣した垂直セカンダリ ナビゲーションを実装します

<頭>



<メタ名="説明" コンテンツ="">
<メタ名="キーワード" コンテンツ="">

<スクリプトタイプ="text/javascript">
    関数 hoversee(){
    var list = document.getElementById('nav');
    var zu = list.getElementsByTagName("li");
    for(var i=0;i     {
        zu[i].onmouseover = function(){
            this.getElementsByTagName('dl')[0].style.display = "ブロック";
        }
        zu[i].onmouseout = function(){
            this.getElementsByTagName('dl')[0].style.display = "none";
        }
    }
    }
    window.onload = hverseee;

<スタイル>
    *{
        フォントファミリー:Microsoft YaHei;
        マージン:0;
        パディング:0;
    }
    本文{幅:100%;}
    ul{リストスタイル: なし;}
    a{テキスト装飾: なし;}
    #header{
        高さ:50px;
        行の高さ:50px;
        背景:#455A6E;
    }
    #ヘッダー h2、#ヘッダー h3{
        フォントの太さ:500;
    }
    #ヘッダー h2{
        色:#fff;
        フォントサイズ:18px;
        幅:180px;
        text-align: 中央;
        背景:#0D2E49;
    }
    #ヘッダー h3{色:#fff;フォントサイズ:16px;}
    .mycenter{
        幅:900px;
        マージン:0 自動;
    }
    #header div.mycenter{
        /*相对定位*/
        位置:相対;
    }
    #nav {
        幅:180px;
        背景:rgba(0, 102, 173, 0.5);
        z-index:999;
    }
    #ナビリ{
        高さ:40px;
        パディング左:40px;
        行の高さ: 40px;
        位置:相対;
    }
    #nav h3{高さ:40px;}
    #nav li dl{
        位置:相対;
        左:140px;
        トップ:-40px;
        幅:150px;
        背景:#fff;
        表示:なし;
        パディング:8px 10px;
    }
    #ナビdt{
        幅:150px;
        行の高さ: 30px;
        高さ:30px;
        背景:#36C1AF;
        色:#fff;
        text-align: 中央;
    }
    #ナビ dd a{
        表示:ブロック;
        高さ:30px;
        幅:150px;
font-size:14px;
カラー:#858585;
}
#nav dd a:hover{
テキスト装飾: 下線;
}
#コンテンツ{
背景:#E95200;
高さ:500px;
}