下面的那些 "结构" 更加适应于上图的场景呢? 或许还有更好的方法?
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并不是属于导航的一部分, 而是子导航的标题.
其实都很好了…… 我有个同学写了三年前端，至今只用 <div>，其它什么 tag 都不用……
不过第一种使用多层 <ul> 嵌套的做法确实看起来最 pro。
比如 WordPress 的 sidebar 一般也那么处理。
多数网站的导航栏（比如 Mozilla）也那么处理。
再比如 Bootstrap 的导航栏也是那么做的。
因为毕竟 <ul>、<li> 能够最大程度地体现元素的逻辑层级关系。其实我也不觉得它的重用性差。
如果是要增加一个标题项的话，最后一个应该是不可取的，虽然能实现，不过不推荐。
如果两个导航栏之间有联系的话推荐用第一种，如果没有联系的话推荐用第二种，需要补充的是建议用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>