bootstrap源码分析----下拉菜单

实现效果如图所示，bootstrap代码

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

css实现过程如下

<style>
        a{text-decoration:none;}
        .dropdown{position:relative;}
        ul,ul li{list-style:none;margin:0;padding:0;}
        .btn{display:inline-block;vertical-align:middle;padding:6px 12px;font-size:14px;cursor:pointer;border-radius:4px;border:1px solid transparent;line-height:20px;}
        .btn-default{background-color:#FFF;border-color:#ccc;}
        .cart{display:inline-block;vertical-align:middle;border-top:4px solid;border-right:4px solid transparent;border-left:4px solid transparent;}
        .dropdown-menu{position:absolute;top:100%;left:0px;min-width:160px;padding:5px 0;margin:2px 0 0;font-size:14px;background:#fff;border:1px solid rgba(0,0,0,0.15);border-radius:4px;box-shadow: 0 6px 12px rgba(0, 0, 0, .175)}
        .dropdown-menu > li > a{display:block;padding:3px 20px;line-height:20px;color:#333;white-space: nowrap;}
        .divider{height:1px;margin:9px 0;overflow:hidden;background:#e5e5e5;}
    </style>