メガメニュー

<div class="d03-01-04-stage">
          <header class="d03-01-04-bar">
            <span class="d03-01-04-logo">MEGA</span>
            <nav class="d03-01-04-nav">
              <a href="#" onclick="return false">ホーム</a>
              <div class="d03-01-04-parent">
                <a href="#" onclick="return false" class="d03-01-04-trigger">サービス ▾</a>
                <div class="d03-01-04-panel">
                  <div class="d03-01-04-col">
                    <h4>Web制作</h4>
                    <a href="#" onclick="return false">コーポレートサイト</a>
                    <a href="#" onclick="return false">ECサイト構築</a>
                    <a href="#" onclick="return false">LP制作</a>
                  </div>
                  <div class="d03-01-04-col">
                    <h4>マーケティング</h4>
                    <a href="#" onclick="return false">SEO対策</a>
                    <a href="#" onclick="return false">広告運用</a>
                    <a href="#" onclick="return false">SNS運用</a>
                  </div>
                  <div class="d03-01-04-col">
                    <h4>サポート</h4>
                    <a href="#" onclick="return false">保守・運用</a>
                    <a href="#" onclick="return false">コンサルティング</a>
                    <a href="#" onclick="return false">研修サービス</a>
                  </div>
                </div>
              </div>
              <a href="#" onclick="return false">実績</a>
              <a href="#" onclick="return false">会社概要</a>
            </nav>
          </header>
        </div>

.prev.d03-01-04{padding:0;display:block}
        .d03-01-04-stage{position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;background:#eef2f7}
        .d03-01-04-bar{
          position:relative;display:flex;align-items:center;justify-content:space-between;
          height:56px;padding:0 18px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.08);
        }
        .d03-01-04-logo{font-weight:800;letter-spacing:.1em;color:#111827;font-size:15px}
        .d03-01-04-nav{display:flex;align-items:center;gap:20px;height:100%}
        .d03-01-04-nav > a,.d03-01-04-trigger{
          color:#1f2937;text-decoration:none;font-size:13px;font-weight:600;
          display:flex;align-items:center;height:56px;
        }
        .d03-01-04-nav > a:hover,.d03-01-04-parent:hover .d03-01-04-trigger{color:#2563eb}
        .d03-01-04-parent{height:100%}
        .d03-01-04-panel{
          position:absolute;left:0;right:0;top:56px;
          background:#fff;box-shadow:0 12px 24px rgba(0,0,0,.12);
          display:flex;gap:8px;padding:18px;
          opacity:0;visibility:hidden;transform:translateY(-8px);
          transition:opacity .25s ease,transform .25s ease,visibility .25s;
        }
        .d03-01-04-parent:hover .d03-01-04-panel{opacity:1;visibility:visible;transform:translateY(0)}
        .d03-01-04-col{flex:1;min-width:0}
        .d03-01-04-col h4{
          margin:0 0 8px;font-size:11px;color:#2563eb;
          border-bottom:2px solid #dbeafe;padding-bottom:6px;
        }
        .d03-01-04-col a{
          display:block;color:#475569;text-decoration:none;
          font-size:11px;padding:5px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
        }
        .d03-01-04-col a:hover{color:#2563eb;padding-left:4px;transition:padding .2s ease,color .2s ease}