线条导航

基本样式

    <ul class="nav nav-line">
      <li class="active"><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li class="disabled"><a href="javascript:;">栏目</a></li>
    </ul>
  

线条位置

    <ul class="nav nav-line nav-line-top">
      <li class="active"><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li class="disabled"><a href="javascript:;">栏目</a></li>
    </ul>
  

线条菜单

    <ul class="nav nav-line nav-box nav-menu">
      <li class="active"><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li class="disabled"><a href="javascript:;">栏目</a></li>
    </ul>
  

综合应用

显示方式、短分隔线、导航尺寸、子菜单等效果的综合应用。

    <ul class="nav nav-line nav-block nav-box nav-divider-line nav-big">
      <li class="drop active">
        <a href="javascript:;">栏目</a>
        <div class="dropdown">
          <ul class="nav nav-menu nav-line nav-box bg-white">
            <li><a href="javascript:;">子栏目</a></li>
            <li class="active"><a href="javascript:;">子栏目</a></li>
            <li><a href="javascript:;">子栏目</a></li>
            <li><a href="javascript:;">子栏目</a></li>
          </ul>
        </div>
      </li>
      <li><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li class="disabled"><a href="javascript:;">栏目</a></li>
    </ul>
  

深色背景

    <div class="bg-main padding radius">
      <ul class="nav nav-line nav-inverse">
        <li class="drop active">
          <a href="javascript:;">栏目</a>
          <div class="dropdown">
            <ul class="nav nav-line nav-menu nav-box bg-white">
              <li><a href="javascript:;">子栏目</a></li>
              <li class="active"><a href="javascript:;">子栏目</a></li>
              <li><a href="javascript:;">子栏目</a></li>
              <li><a href="javascript:;">子栏目</a></li>
            </ul>
          </div>
        </li>
        <li><a href="javascript:;">栏目</a></li>
        <li><a href="javascript:;">栏目</a></li>
        <li class="disabled"><a href="javascript:;">栏目</a></li>
      </ul>
    </div>