ナビ・リスト操作
メガメニュー
ナビ項目にホバー/タップで複数列の大きなドロップダウンが開く。PCもスマホも対応。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
コード（コピーして使えます）
<div class="mm-root">
<header class="mm-header">
<span class="mm-logo">Shop</span>
<nav class="mm-nav">
<div class="mm-item">
<button class="mm-trigger">カテゴリ ▾</button>
<div class="mm-panel">
<div class="mm-col">
<p class="mm-col-title">ファッション</p>
<a href="#">トップス</a>
<a href="#">ボトムス</a>
<a href="#">アウター</a>
</div>
<div class="mm-col">
<p class="mm-col-title">小物</p>
<a href="#">バッグ</a>
<a href="#">アクセサリー</a>
<a href="#">シューズ</a>
</div>
<div class="mm-col">
<p class="mm-col-title">特集</p>
<a href="#">セール</a>
<a href="#">新着</a>
<a href="#">ランキング</a>
</div>
</div>
</div>
<div class="mm-item">
<button class="mm-trigger">ブランド ▾</button>
<div class="mm-panel">
<div class="mm-col">
<p class="mm-col-title">国内</p>
<a href="#">ブランドA</a>
<a href="#">ブランドB</a>
</div>
<div class="mm-col">
<p class="mm-col-title">海外</p>
<a href="#">ブランドC</a>
<a href="#">ブランドD</a>
</div>
</div>
</div>
</nav>
</header>
<div class="mm-body">
<p class="mm-hint">ナビをホバー/タップするとメニューが開きます</p>
</div>
</div>