純粋な CSS で実装された大きなドロップダウン メニューのサンプル コード

<ナビ>
  <ul class="コンテナ ul-reset">
    <li><a href='#'>ホーム</a></li>
    <li class='ドロップ可能'>
      <a href='#'>カテゴリー 1</a>
      <div class='メガメニュー'>
        <div class="コンテナcf">
          <ul class="ul-reset">
            <h3>見出し 1</h3>
            <li><a href='#'>カテゴリ 1 のサブリンク</a></li>
            <li><a href='#'>カテゴリ 1 のサブリンク</a></li>
            <li><a href='#'>カテゴリ 1 のサブリンク</a></li>
            <li><a href='#'>カテゴリ 1 のサブリンク</a></li>
            <li><a href='#'>カテゴリ 1 のサブリンク</a></li>
          </ul><!-- .ul-reset -->
          <ul class="ul-reset">
            <h3>見出し 2</h3>
            <li><a href='#'>カテゴリ 1 のサブリンク</a></li>
            <li><a href='#'>カテゴリ 1 のサブリンク</a></li>
            <li><a href='#'>カテゴリ 1 のサブリンク</a></li>
            <li><a href='#'>カテゴリ 1 のサブリンク</a></li>
            <li><a href='#'>カテゴリ 1 のサブリンク</a></li>
          </ul><!-- .ul-reset -->
          <ul class="ul-reset">
            <h3>見出し3</h3>
            <li><a href='#'>カテゴリ 1 のサブリンク</a></li>
            <li><a href='#'>カテゴリ 1 のサブリンク</a></li>
            <li><a href='#'>カテゴリ 1 のサブリンク</a></li>
            <li><a href='#'>カテゴリ 1 のサブリンク</a></li>
            <li><a href='#'>カテゴリ 1 のサブリンク</a></li>
          </ul><!-- .ul-reset -->
          <ul class="ul-reset">
            <h3>見出し4</h3>
            <li><img src="http://placehold.it/205x172"></li>
          </ul>
        </div><!-- .コンテナ -->
      </div><!-- .mega-menu -->
    </li><!-- .droppable -->
    <li class='ドロップ可能'>
      <a href='#'>カテゴリー 2</a>
      <div class='メガメニュー'>
        <div class="コンテナcf">
          <ul class="ul-reset">
            <h3>見出し 1</h3>
            <li><a href='#'>カテゴリ 2 のサブリンク</a></li>
            <li><a href='#'>カテゴリ 2 のサブリンク</a></li>
            <li><a href='#'>カテゴリ 2 のサブリンク</a></li>
            <li><a href='#'>カテゴリ 2 のサブリンク</a></li>
            <li><a href='#'>カテゴリ 2 のサブリンク</a></li>
          </ul><!-- .ul-reset -->
          <ul class="ul-reset">
            <h3>見出し 2</h3>
            <li><a href='#'>カテゴリ 2 のサブリンク</a></li>
            <li><a href='#'>カテゴリ 2 のサブリンク</a></li>
            <li><a href='#'>カテゴリ 2 のサブリンク</a></li>
            <li><a href='#'>カテゴリ 2 のサブリンク</a></li>
            <li><a href='#'>カテゴリ 2 のサブリンク</a></li>
          </ul><!-- .ul-reset -->
          <ul class="ul-reset">
            <h3>見出し3</h3>
            <li><a href='#'>カテゴリ 2 のサブリンク</a></li>
            <li><a href='#'>カテゴリ 2 のサブリンク</a></li>
            <li><a href='#'>カテゴリ 2 のサブリンク</a></li>
            <li><a href='#'>カテゴリ 2 のサブリンク</a></li>
            <li><a href='#'>カテゴリ 2 のサブリンク</a></li>
          </ul><!-- .ul-reset -->
          <ul class="ul-reset">
            <h3>見出し4</h3>
            <li><a href='#'>カテゴリ 2 のサブリンク</a></li>
            <li><a href='#'>カテゴリ 2 のサブリンク</a></li>
            <li><a href='#'>カテゴリ 2 のサブリンク</a></li>
            <li><a href='#'>カテゴリ 2 のサブリンク</a></li>
            <li><a href='#'>カテゴリ 2 のサブリンク</a></li>
          </ul><!-- .ul-reset -->
        </div><!-- .コンテナ -->
      </div><!-- .mega-menu-->
    </li><!-- .droppable -->
    <li><a href='#'>カテゴリー 3</a></li>
    <li><a href='#'>カテゴリー 4</a></li>
    <li><a href='#'>カテゴリー 5</a></li>
    <li><a href='#'>カテゴリー 6</a></li>
  </ul><!-- .container .ul-reset -->
</nav>

/* #リセット
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
html {ボックスのサイズ: 境界線ボックス;}
*、*:before、*:after {box-sizing: inherit; }
/* #ユニバーサルスタイルとデフォルトスタイル
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
体 {
    背景: url(../img/black-wood-small.jpg);
    色: #ddd;
    フォントファミリ: "Open Sans"、サンセリフ;
    フォントサイズ: 14px;
  行の高さ: 1;
  マージン: 0;
  パディング: 0;
  テキスト配置: 中央;
}
{テキスト装飾: なし;}
h1 {
  フォントサイズ: 40px;
    フォントの太さ: 700;
  下マージン: 20px;
    上マージン: 20px;
}
h2 {
  フォントサイズ: 15px;
    フォントの太さ: 600;
  下部マージン: 30px;
    上マージン: 10px;
}
。容器 {
  マージン: 自動;
  幅: 940ピクセル;
}
.ul-リセット{
  左パディング: 0;
   上マージン: 0;
   下マージン: 0;
  リストスタイル: なし;
}
/* #ナビゲーションスタイル
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
ナビゲーション{
  背景: #424242;
  フォントサイズ: 0;
  位置: 相対的;
}
nav > ul > li {
  表示: インラインブロック;
    フォントサイズ: 14px;
    パディング: 0 15px;
    位置: 相対的;
}
nav > ul > li:first-child {padding-left: 0;}
nav > ul > li:last-child {padding-right: 0;}
nav > ul > li > a {
  色: #fff;
    表示: ブロック;
    位置: 相対的;
    パディング: 20px 0;
    border-bottom: 3px 透明の実線;
}
ナビ > ul > li:hover > a {
  色: #69aae0; 
    下境界線: 3px 実線 #69aae0;
}
/* #メガメニュースタイル
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.メガメニュー{
  背景: #f0f0f0;
    表示: なし;
    左: 0;
    位置: 絶対;
    テキスト配置: 左;
    幅: 100%;
}
.mega-menu h3 {color: #444;}
.メガメニュー ul {
  フロート: 左;
    下マージン: 20px;
    右マージン: 40px;
    幅: 205ピクセル;
}
.mega-menu ul:last-child {margin-right: 0;}
.mega-menu a {
  下境界線: 1px 実線 #ddd;
    色: #4ea3d8;
    表示: ブロック;
    パディング: 10px 0;
}
.mega-menu a:hover {color: #2d6a91;}
/* #ドロップ可能なクラススタイル
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.droppable {位置: 静的;}
.droppable > a:after {
  内容: "\f107";
    フォントファミリー: FontAwesome;
    フォントサイズ: 12px;
    左パディング: 6px;
    位置: 相対的;
    上: -1px;
}
.droppable:hover .mega-menu {display: block;}
/* #ブラウザクリアフィックス
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.cf:前、
.cf:後{
  内容: " "; /* 1 */
   表示: テーブル; /* 2 */
}
.cf:after {clear: both;}