CSS3で実装された水平ヘッダーメニュー

<nav class="dropdownmenu">
  <ul>
    <li><a href="http://www.jochaho.com/wordpress/">123WORDPRESS.COM</a></li>
    <li><a href="http://www.jochaho.com/wordpress/about-pritesh-badge/">jb51</a></li>
    <li><a href="#">HTML5 と CSS3 に関する記事</a>
      <ul id="サブメニュー">
        SVG と Canvas の違い
        <li><a href="http://www.jochaho.com/wordpress/new-features-in-html5/">HTML5 の新機能</a></li>
        <li><a href="http://www.jochaho.com/wordpress/creating-links-to-sections-within-a-webpage/">Web ページ内のセクションへのリンクの作成</a></li>
      </ul>
    </li>
    <li><a href="http://www.jochaho.com/wordpress/category/news/">ニュース</a></li>
    <li><a href="http://www.jochaho.com/wordpress/about-pritesh-badge/">お問い合わせ</a></li>
  </ul>
</nav>

.dropdownmenu ul、.dropdownmenu li {
	マージン: 0;
	パディング: 0;
}
.ドロップダウンメニュー ul {
	背景: グレー;
	リストスタイル: なし;
	幅: 100%;
}
.ドロップダウンメニュー li {
	フロート: 左;
	位置: 相対的;
	幅:自動;
}
.ドロップダウンメニュー {
	背景: #30A6E6;
	色: #FFFFFF;
	表示: ブロック;
	フォント: 太字 12px/20px サンセリフ;
	パディング: 10px 25px;
	テキスト配置: 中央;
	テキスト装飾: なし;
	-webkit-transition: すべて .25 秒の緩和;
	-moz-transition: すべて .25 秒の緩和;
	-ms-transition: すべて .25 秒の緩和;
	-o-transition: すべて .25 が緩和されます。
	移行: すべて .25 の緩和;
}
.dropdownmenu li:hover a {
	背景: #000000;
}
#サブメニュー{
	左: 0;
	不透明度: 0;
	位置: 絶対;
	上: 35px;
	可視性: 非表示;
	zインデックス: 1;
}
li:hover ul#サブメニュー {
	不透明度: 1;
	top: 40px; /* 上部ナビゲーションのパディングの上下に応じて調整します */
	可視性: 可視;
}
#サブメニュー li {
	フロート: なし;
	幅: 100%;
}
#サブメニュー a:hover {
	背景: #DF4B05;
}
#サブメニュー a {
	背景色:#000000;
}