按钮菜单

下拉菜单按钮

点击按钮显示下拉菜单效果

    <div class="drop">
      <button class="button">按钮 <i class="icon-down"></i></button>
      <div class="dropdown">
        <div class="list-link list-box bg-white">
          <a href="javascript:;">链接列表</a>
          <a href="javascript:;" class="active">链接列表</a>
          <a href="javascript:;">链接列表</a>
        </div>
      </div>
    </div>
  

菜单向上

默认的菜单为向下展示，给.drop叠加.drop-up样式，可使菜单向上展示。

    <div class="drop drop-up">
      <button class="button">按钮 <i class="icon-up"></i></button>
      <div class="dropdown">
        <div class="list-link list-box bg-white">
          <a href="javascript:;">链接列表</a>
          <a href="javascript:;" class="active">链接列表</a>
          <a href="javascript:;">链接列表</a>
        </div>
      </div>
    </div>
  

菜单右侧对齐

默认的菜单是左侧对齐，给.drop叠加.drop-right样式，可使菜单右侧对齐。

    <div class="drop drop-up drop-right">
      <button class="button">按钮 <i class="icon-down"></i></button>
      <div class="dropdown">
        <div class="list-link list-box bg-white">
          <a href="javascript:;">链接列表</a>
          <a href="javascript:;" class="active">链接列表</a>
          <a href="javascript:;">链接列表</a>
        </div>
      </div>
    </div>
  

分裂式下拉按钮

点击按钮显示下拉菜单效果

    <div class="drop">
      <div class="button-group">
        <button class="button">按钮</button>
        <button class="button button-toggle"><i class="icon-down"></i></button>
      </div>
      <div class="dropdown">
        <div class="list-link list-box bg-white">
          <a href="javascript:;">链接列表</a>
          <a href="javascript:;" class="active">链接列表</a>
          <a href="javascript:;">链接列表</a>
        </div>
      </div>
    </div>
  

向上靠右

    <div class="drop drop-up drop-right">
      <div class="button-group">
        <button class="button">按钮</button>
        <button class="button button-toggle"><i class="icon-up"></i></button>
      </div>
      <div class="dropdown">
        <div class="list-link list-box bg-white">
          <a href="javascript:;">链接列表</a>
          <a href="javascript:;" class="active">链接列表</a>
          <a href="javascript:;">链接列表</a>
        </div>
      </div>
    </div>