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

Question

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

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>

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

<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>

3. 另外一种想法.

<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 并不是属于导航的一部分, 而是子导航的标题.

Answer 1

如果是要增加一个标题项的话，最后一个应该是不可取的，虽然能实现，不过不推荐。

如果两个导航栏之间有联系的话推荐用第一种，如果没有联系的话推荐用第二种，需要补充的是建议用section或者别的什么标签包裹住每一个导航栏的标题和内容。

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

Answer 2

其实都很好了…… 我有个同学写了三年前端，至今只用 <div>，其它什么 tag 都不用……

不过第一种使用多层 <ul> 嵌套的做法确实看起来最 pro。
比如 WordPress 的 sidebar 一般也那么处理。
多数网站的导航栏（比如 Mozilla）也那么处理。
再比如 Bootstrap 的导航栏也是那么做的。

因为毕竟 <ul>、<li> 能够最大程度地体现元素的逻辑层级关系。其实我也不觉得它的重用性差。