关于导航的html5语义

Question

今天，我想仔细看看来自html5的nav元素。我在大多数网站上都看到，它的使用方式应该是里面有个ul li。那就不是很语义了，因为nav元素已经像一个列表了。即使在MDN上，我也看到了使用nav ul li元素的示例。但是简单的导航，里面有链接，甚至下拉，怎么样？

<nav>
    <a href="#">Some Text</a>
    <a href="#">Some Text</a>
    <a href="#">Some Text</a>
    <a href="#">Some Text</a>
    <a href="#">Some Text</a>
    <a href="#">Some Text</a>
    <a href="#">Some Text</a>
    <a href="#" id="dropdown-menu">Dropdown
        <nav class="dropdown">
            <a href="#">Some Text</a>
            <a href="#">Some Text</a>
            <a href="#">Some Text</a>
            <a href="#">Some Text</a>
            <a href="#">Some Text</a>
            <a href="#">Some Text</a>
            <a href="#">Some Text</a>
        </nav>
    </a>
</nav>

它是语义的，是错的吗？如果它是正确的，我使用的方式，为什么每个人在导航内使用ul li元素？

Update:就在这个例子中，我更新了主题并添加了css和Javascript

$('#dropdown-menu').on("click", function(e) {
    $('.dropdown').slideDown(100);
});

CSS

.dropdown {
    display: none; 
}

Answer 1

我认为良好的实践(例如wordpress所必需的)是以这种方式构建导航：

<nav>
   <ul>
      <li><a href="" title=""></a></li>
      <li><a href="" title=""></a></li>
      <li><a href="" title=""></a></li>
      <li>
         <a href="" title=""></a>
         <ul>
             <li><a href="" title=""></a></li>
             <li><a href="" title=""></a></li>
             <li><a href="" title=""></a></li>
         </ul>
      </li>
   </ul>
</nav>

总是使用ul，这是自然的-导航是一个列表。