# 二級導航 為二級導航設置不同的樣式風格 ## 用法 使用以下類名來應用這個組件。對齊一個二級導航，比如水平居中，你可以使用 [Flex 組件](flex.html)。 | Class | 描述 | | --- | --- | | `.uk-subnav` | 添加此類名到 `&lt;ul&gt;` 元素中，并在列表內嵌 `&lt;a&gt;` 元素。 | | `.uk-active` | 為列表條目添加此類名，使其呈現選中狀態。 | | `.uk-disabled` | 為列表條目添加此類名，使其呈現禁用狀態。 | ### Example  ### Markup ``` <ul class="uk-subnav"> <li class="uk-active"><a href="">...</a></li> <li><a href="">...</a></li> <li class="uk-disabled"><a href="">...</a></li> </ul> ``` * * * ## 修飾 ### 二級導航的分隔線 添加 `.uk-subnav-line` 類名，用線條將菜單條目分隔開。 #### Example  ### Markup ``` <ul class="uk-subnav uk-subnav-line"> <li>...</li> </ul> ``` * * * ### 二級導航彈丸 添加 `.uk-subnav-pill` 類名，使選中狀態的菜單條目擁有背景色。只需為菜單條目添加`.uk-active` 類名，就能讓它呈現選中的狀態。 #### Example  ### Markup ``` <ul class="uk-subnav uk-subnav-pill"> <li class="uk-active">...</li> </ul> ``` * * * ## 帶下拉菜單的二級導航 這個例子展示了如何使用帶有 [下拉菜單](dropdown.html) 的二級導航。 #### Example  #### Markup ``` <ul class="uk-subnav"> <li><a href="">...</a></li> <!-- 這是啟用JavaScript的容器 --> <li data-uk-dropdown="{mode:'click'}"> <!-- 這是撥動下拉菜單的導航項 --> <a href="">...</a> <!-- 這是下拉菜單 --> <div class="uk-dropdown uk-dropdown-small"> <ul class="uk-nav uk-nav-dropdown"> <li><a href="">...</a></li> </ul> </div> </li> </ul> ```