# 二级导航 为二级导航设置不同的样式风格 ## 用法 使用以下类名来应用这个组件。对齐一个二级导航，比如水平居中，你可以使用 [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> ```