ナビゲーションバーのドロップダウンメニューのサンプルコードを実装するためのHTML+CSS

<ヘッダークラ​​ス="ヘッダー">
        <div class="header_left">
            <img src="img/logo.jpg">
        </div>
        <div class="header_right">
                <div class="number_right">
                    <img src="img/number.jpg">
                </div>
                <ul>
                    <a href="#"><li>ホーム</li></a>
                    <a href="#"><li class="show_list">
                        成功事例
                        <ul class="move_list">
                            <li>ブランドデザイン</li>
                            <li>ウェブデザイン</li>
                            <li>グラフィックデザイン</li>
                            <li>電気店</li>
                            <li>空間・建築</li>
                        </ul>
                    </li></a>
                    <a href="#"><li>デザインしたい</li></a>
                    <a href="#"><li>オンライン相談</li></a>
                    <a href="#"><li>会員登録</li></a>
                    <a href="#"><li>メンバーログイン</li></a>
                </ul>
        </div>
    </ヘッダー>

。ヘッダ{
    高さ: 120px;
    幅: 1046ピクセル;
    マージン: 0 自動;
}
.header_left{
    フロート: 左;
    行の高さ: 120px;

}
.header_left画像{
    幅: 300ピクセル;
    高さ: 100px;
}
.header_right{
    フロート: 右;
    高さ: 120px;
    位置: 相対的;
}
.header_right>div{
    位置: 絶対;
    上: 0;
    右: 0;

}
.header_right ul{
    上マージン: 88px;

}
.header_right ul a li{
    右境界線: 1px 実線 #000000;
    高さ: 13px;
    フォントサイズ: 15px;
    パディング: 0 25px;
    フォントの太さ: 太字;
    色: #666;

}
.header_right ul a{
    フロート: 左;
    行の高さ: 13px;

}
.header_right ul a li:hover{
    色: #000000;
}
.header_right ul a:last-child li{/*最後の境界線を削除*/
    境界線: なし;
}
.show_list{
    位置: 相対的;
}
.show_list .move_list{
    表示: なし;
    zインデックス: 103;
    位置: 絶対;
    上: -56px;
    左: 0;
    幅: 100%;
    背景: #333;
    テキスト配置: 中央;
}
.show_list .move_list li{
    パディング: 10px 0;
    幅: 114ピクセル;
    色: #fff;
}
.header_right ul a .show_list{
    パディング下部: 20px;
    右境界線: なし;
}
.show_list:hover .move_list{
    表示: ブロック;
}
.header_right ul a:nth-child(3){
    左境界線: 1px 実線 #000;
}
.show_list .move_list li:hover{
    色: 白;
    背景: オレンジ;
}

* {
    マージン: 0;
    パディング: 0
}
えむ、私{
    フォントスタイル: 通常
}
li {
    リストスタイル: なし
}
{
    フォント: 14px/24px Microsoft YaHei、Arial、\​​\5B8B\4F53、Arial Narrow;
    文字間隔: 1.2px;
    色: #666;
    テキスト装飾: なし
}
ホバー{
    色: #c81623 ;
}

画像 {
    境界線: 0;
    垂直方向の位置合わせ: 中央
}
入力{
    アウトライン: なし;
}
ボタン {
    カーソル: ポインタ;
    境界線:なし;
    アウトライン: なし;
}