为什么按照例子又写了一个菜单之后，第一个菜单下拉的位置错了-慕课网

为什么按照例子又写了一个菜单之后，第一个菜单下拉的位置错了

来源：5-1 下拉菜单（基本用法）

昧光

2016-04-16 10:53

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>下拉菜单</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>

 <div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    下拉菜单
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  </ul>
<br/><br/>
  <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown">
          选择你最喜欢的水果
          <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">苹果</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">香蕉</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">梨</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">桃</a></li>
      </ul>
  </div>
</div> 
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>
</html>