Example
Markup
<nav class="mega-menu">
<ul class="mega-menu__root">
<li>
<a href="javascript://" class="post-card">
<span class="post-card__title card-title card-title--left-zero">
Country & Folk
</span>
<span class="post-card__description post-card__description--discreet">137</span>
</a>
</li>
<li>
<a href="javascript://" class="post-card post-card--continue">
<span class="post-card__title card-title card-title--left-zero">
Dance & Disco
</span>
</a>
<div class="mega-menu__child mega-menu__level-2">
<div class="mega-menu__child-wrap">
<h4 class="mega-menu__child-title post-card">
<a href="javascript://" class="post-card__title card-title card-title--left-zero">
Dance & Disco
</a>
</h4>
<ul>
<li>
<a href="javascript://" class="post-card">
<span class="post-card__title card-title card-title--left-zero">
Dubstep
</span>
<span class="post-card__description post-card__description--discreet">42</span>
</a>
</li>
<li>
<a href="javascript://" class="post-card post-card--continue">
<span class="post-card__title card-title card-title--left-zero">
House
</span>
</a>
<div class="mega-menu__child mega-menu__level-3">
<div class="mega-menu__child-wrap">
<h4 class="mega-menu__child-title post-card">
<a href="javascript://" class="post-card__title card-title card-title--left-zero">
House
</a>
</h4>
<ul>
<li>
<a href="javascript://" class="post-card">
<span class="post-card__title card-title card-title--left-zero">
Deep House
</span>
<span class="post-card__description post-card__description--discreet">36</span>
</a>
</li>
<li>
<a href="javascript://" class="post-card">
<span class="post-card__title card-title card-title--left-zero">
Minimal House
</span>
<span class="post-card__description post-card__description--discreet">25</span>
</a>
</li>
<li>
<a href="javascript://" class="post-card">
<span class="post-card__title card-title card-title--left-zero">
Party Hits
</span>
<span class="post-card__description post-card__description--discreet">48</span>
</a>
</li>
<li>
<a href="javascript://" class="post-card">
<span class="post-card__title card-title card-title--left-zero">
Chillstep
</span>
<span class="post-card__description post-card__description--discreet">13</span>
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="javascript://" class="post-card">
<span class="post-card__title card-title card-title--left-zero">
Electro
</span>
<span class="post-card__description post-card__description--discreet">42</span>
</a>
</li>
<li>
<a href="javascript://" class="post-card">
<span class="post-card__title card-title card-title--left-zero">
Dancehall
</span>
<span class="post-card__description post-card__description--discreet">42</span>
</a>
</li>
<li>
<a href="javascript://" class="post-card">
<span class="post-card__title card-title card-title--left-zero">
Violin
</span>
<span class="post-card__description post-card__description--discreet">42</span>
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="javascript://" class="post-card">
<span class="post-card__title card-title card-title--left-zero">
Klassische Musik
</span>
<span class="post-card__description post-card__description--discreet">20</span>
</a>
</li>
<li>
<a href="javascript://" class="post-card">
<span class="post-card__title card-title card-title--left-zero">
Sonstiges
</span>
<span class="post-card__description post-card__description--discreet">216</span>
</a>
</li>
<li>
<a href="javascript://" class="post-card">
<span class="post-card__title card-title card-title--left-zero">
Worldmusic
</span>
<span class="post-card__description post-card__description--discreet">26</span>
</a>
</li>
<li>
<a href="javascript://" class="post-card">
<span class="post-card__title card-title card-title--left-zero">
New Age
</span>
<span class="post-card__description post-card__description--discreet">16</span>
</a>
</li>
<li>
<a href="javascript://" class="post-card">
<span class="post-card__title card-title card-title--left-zero">
Soundtracks
</span>
<span class="post-card__description post-card__description--discreet">4'999</span>
</a>
</li>
</ul>
</nav>
Source:
assets/styles/04-organisms/02-navigation/_mega-menu.scss, line 1