← 動的パーツギャラリーへ戻る

パーツ番号 03-02-01 ・ CSSのみ

マルチレベルドロップダウン

親項目にホバーで子メニュー、子にホバーで孫メニューが横方向に展開する多段ナビ。WordPressの階層カテゴリーやサービス一覧のグローバルメニューに最適。

hovercssoverlay

プレビュー

ソースコード

HTML

<nav class="d03-02-01-nav">
          <ul class="d03-02-01-menu">
            <li><a href="#">サービス</a>
              <ul class="d03-02-01-sub">
                <li><a href="#">Web制作</a>
                  <ul class="d03-02-01-sub2">
                    <li><a href="#">コーポレート</a></li>
                    <li><a href="#">ランディングページ</a></li>
                    <li><a href="#">ECサイト</a></li>
                  </ul>
                </li>
                <li><a href="#">SEO対策</a>
                  <ul class="d03-02-01-sub2">
                    <li><a href="#">内部施策</a></li>
                    <li><a href="#">コンテンツ制作</a></li>
                  </ul>
                </li>
                <li><a href="#">保守運用</a></li>
              </ul>
            </li>
            <li><a href="#">会社情報</a>
              <ul class="d03-02-01-sub">
                <li><a href="#">代表挨拶</a></li>
                <li><a href="#">アクセス</a></li>
              </ul>
            </li>
          </ul>
        </nav>

CSS

.prev.d03-02-01{align-items:flex-start;justify-content:flex-start}
        .d03-02-01-nav{font-size:14px;width:100%}
        .d03-02-01-menu,.d03-02-01-sub,.d03-02-01-sub2{list-style:none;margin:0;padding:0}
        .d03-02-01-menu{display:flex;gap:6px}
        .d03-02-01-menu>li{position:relative}
        .d03-02-01-menu a{display:block;padding:10px 16px;color:#1f2937;text-decoration:none;border-radius:8px;white-space:nowrap;transition:background .2s,color .2s}
        .d03-02-01-menu>li>a{background:#eef2ff;font-weight:600}
        .d03-02-01-menu a:hover{background:#4f46e5;color:#fff}
        .d03-02-01-sub,.d03-02-01-sub2{position:absolute;min-width:170px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 12px 30px rgba(30,41,59,.14);padding:6px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s;z-index:5}
        .d03-02-01-sub{top:100%;left:0;margin-top:6px}
        .d03-02-01-sub2{top:-7px;left:100%;margin-left:6px}
        .d03-02-01-menu>li:hover>.d03-02-01-sub,
        .d03-02-01-sub li:hover>.d03-02-01-sub2{opacity:1;visibility:visible;transform:translateY(0)}
        .d03-02-01-sub li{position:relative}
        .d03-02-01-sub>li>a::after{content:"";position:absolute;right:10px;top:50%;width:5px;height:5px;border-right:2px solid #94a3b8;border-bottom:2px solid #94a3b8;transform:translateY(-70%) rotate(-45deg)}
        .d03-02-01-sub>li:not(:has(.d03-02-01-sub2))>a::after{display:none}

クラス名 .d03-02-01 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。