在实现 [ 图片 ] 效果时, 以下那几种 "结构组合" 更加适合?

面的那些 "结构" 更加适应于上图的场景呢? 或许还有更好的方法?

1. 有着较多的镶嵌.

  <nav class="main-menu">
     <ul class="music-menu">
        <li class="music-menu__item">
            <span class="music-menu__heading"></span>
            <ul class="music-menu__children">
                <li><a href="" class="music-menu__children__item"></a></li>
                <li><a href="" class="music-menu__children__item"></a></li>
                <li><a href="" class="music-menu__children__item"></a></li>
            </ul>
        </li>
        <li class="music-menu__item">
            <span class="music-menu__heading"></span>
            <ul class="music-menu__children">
                <li><a href="" class="music-menu__children__item"></a></li>
                <li><a href="" class="music-menu__children__item"></a></li>
                <li><a href="" class="music-menu__children__item"></a></li>
            </ul>
         </li>
      </ul>
   </nav>

1. 看起来很清爽, 代码重用很方便.

 <nav class="main-nav">
     <span class="main-nav__heading"></span>
     <ul id="language-menu" class="music-menu">
        <li><a href="" class="music-menu__item"></a></li>
        <li><a href="" class="music-menu__item"></a></li>
        <li><a href="" class="music-menu__item"></a></li>
     </ul>
    <span class="main-nav__heading"></span>
    <ul id="genre-menu" class="music-menu">
        <li><a href="" class="music-menu__item"></a></li>
        <li><a href="" class="music-menu__item"></a></li>
        <li><a href="" class="music-menu__item"></a></li>
    </ul>
 </nav>

1. 另外一种想法.

<nav class="main-nav">
    <ul id="language-menu" class="music-menu">
        <li><span class="music-menu__heading"></span></li>
        <li><a href="" class="music-menu__item"></a></li>
        <li><a href="" class="music-menu__item"></a></li>
        <li><a href="" class="music-menu__item"></a></li>
    </ul>
    <ul id="genre-menu" class="music-menu">
        <li><span class="music-menu__heading"></span></li>
        <li><a href="" class="music-menu__item"></a></li>
        <li><a href="" class="music-menu__item"></a></li>
        <li><a href="" class="music-menu__item"></a></li>
    </ul>
</nav>

.main-nav__heading 并不是属于导航的一部分, 而是子导航的标题.