下拉導航菜單是現代移動端網站設計中必不可少的組件之一。HTML5提供了一種方便易用的方式來創建分類篩選下拉導航菜單。本文將介紹如何使用HTML5代碼創建這樣的菜單。 首先，我們需要在HTML文檔中定義一個下拉菜單的結構。這可以通過使用一個父元素和一個包含子元素的無序列表來實現。以下是HTML5代碼示例：

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>

上面的代碼會創建一個下拉菜單，其中包含一個觸發元素和一個下拉列表。用戶單擊觸發元素時，下拉列表會向下滑動以顯示菜單項。 現在，我們可以進一步細化這個下拉菜單，以便對菜單項進行分類篩選。這可以通過使用HTML5的“嵌套菜單”功能來實現，其中一個列表項可以打開另一個下拉菜單。以下是HTML5代碼示例：

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>

上面的代碼中，我們添加了一個分類篩選菜單項，并將其設置為一個下拉菜單。當用戶單擊該鏈接時，會顯示一個子菜單，其中包含進一步的菜單項。 最后，我們需要使用一些JavaScript代碼來激活下拉菜單。這可以通過添加以下代碼來實現：

$('.dropdown-toggle').dropdown()

通過以上步驟我們就可以創建一個基于HTML5的移動端分類篩選下拉導航菜單了。