<!DOCTYPE htm>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>

<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>body {margin:20px}</style>

<h2>下拉菜单</h2>

<p>.dropdown 菜单用于指定下拉菜单，下拉菜单都包裹在 .dropdown 里。</p>

<p>.dropdown-menu 类用于实际下拉菜单的创建。</p>

<div class="dropdown">

<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">前端

<span class="caret"></span></button>

<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">

  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML 5</a></li>

  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS 3</a></li>

  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>

  <li role="presentation" class="divider"></li>