純粋な CSS ドロップダウン メニュー

<div id="コンテナ">
    <ナビ>
        <ul>
            <li><a href="#">ホーム</a></li>
            <li><a href="#">WordPress</a>
            <!-- 第 1 層のドロップダウン -->
            <ul>
                <li><a href="#">テーマ</a></li>
                <li><a href="#">プラグイン</a></li>
                <li><a href="#">チュートリアル</a></li>
            </ul>        
            </li>
            <li><a href="#">ウェブデザイン</a>
            <!-- 第 1 層のドロップダウン -->
            <ul>
                <li><a href="#">リソース</a></li>
                <li><a href="#">リンク</a></li>
                <li><a href="#">チュートリアル</a>
            	<!-- 2 層目のドロップダウン -->
                <ul>
                    <li><a href="#">HTML/CSS</a></li>
                    <li><a href="#">jQuery</a></li>
                    <li><a href="#">その他</a>
                        <!-- 3 層目のドロップダウン -->
                        <ul>
                            <li><a href="#">もの</a></li>
                            <li><a href="#">もの</a></li>
                            <li><a href="#">その他の情報</a></li>
                        </ul>
                    </li>
                </ul>
                </li>
            </ul>
            </li>
            <li><a href="#">グラフィック デザイン</a></li>
            <li><a href="#">インスピレーション</a></li>
            <li><a href="#">お問い合わせ</a></li>
            <li><a href="#">概要</a></li>
        </ul>
    </nav>
  <h1>純粋な CSS ドロップダウン メニュー</h1>
<p> CSS のみで作成されたシンプルなドロップダウン ナビゲーション メニュー。ドロップダウンにはプラス記号 ( + ) が付いています。</p>
</div>

/* CSS ドキュメント */

url をインポートします(https://fonts.googleapis.com/css?family=Open+Sans);
url をインポートします(https://fonts.googleapis.com/css?family=Bree+Serif);

体 {
	背景: #212121;
	フォントサイズ:22px;
	行の高さ: 32px;
	色: #ffffff;
	ワードラップ:単語区切り !重要;
	フォントファミリー: 'Open Sans'、サンセリフ;
	}

h1 {
	フォントサイズ: 60px;
	テキスト配置: 中央;
	色: #FFF;
}	

h3 {
	フォントサイズ: 30px;
	テキスト配置: 中央;
	色: #FFF;
}

h3 a {
	色: #FFF;
}

{
	色: #FFF;
}

h1 {
	上マージン: 100px;
	テキスト配置:中央;
	フォントサイズ:60px;
	フォントファミリー: 'Bree Serif'、'serif';
	}

＃容器 {
	マージン: 0 自動;
}

ｐ {
	テキスト配置: 中央;
}

ナビゲーション{
	マージン: 50px 0;
	背景色: #E64A19;
}

ナビゲーション{
	パディング: 0;
  マージン: 0;
	リストスタイル: なし;
	位置: 相対的;
	}
	
nav ul li {
	表示:インラインブロック;
	背景色: #E64A19;
	}

ナビ
	表示:ブロック;
	パディング:0 10px;	
	色:#FFF;
	フォントサイズ:20px;
	行の高さ: 60px;
	テキスト装飾:なし;
}

ナビゲーション a:hover { 
	背景色: #000000; 
}

/* デフォルトでドロップダウンを非表示にする */
nav ul ul {
	表示: なし;
	位置: 絶対; 
	top: 60px; /* メインナビゲーションの高さ */
}
	
/* ホバー時にドロップダウンを表示する */
nav ul li:hover > ul {
	表示:継承;
}
	
/* 最初の階層のドロップダウン */
nav ul ul li {
	幅:170ピクセル;
	フロート:なし;
	表示:リスト項目;
	位置: 相対的;
}

/* 第 2 層、第 3 層、さらにそれ以上の層 */
nav ul ul ul li {
	位置: 相対的;
	上:-60px; 
	左:170px;
}

	
/* ドロップダウンシンボルを変更するにはこれを変更してください */
li > a:after { コンテンツ: ' + '; }
li > a:only-child:after { コンテンツ: ''; }