下拉菜单

定义：用于显示链接列表的可切换、有上下文的菜单。(大家都知道哈）

HTML中，可以使用任何的 HTML 元素来打开下拉菜单，我想大家都知道就是<span>,<div> 或 a <button> 元素。
在css中.dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。

.dropdown {
position: relative;
display: inline-block;
}
<div class="dropdown">
<button class="dropbtn">下拉菜单</button>
<a href="#">bootstrap</a>
<a href="#">bootstrap</a>
<a href="#">bootstrap</a>
</div>

这个是我之前学的，要在HTML和CSS俩边都的敲，然后最近在学这个bootstrap，感觉方便的不是一点，http://v3.bootcss.com/components/#dropdowns-example这个是bootstrap的学习网站，言归正传，在bootstrap上的学到的下拉菜单。

将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。

代码案例

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data- toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
 <ul class="dropdown-menu" aria-
labelledby="dropdownMenu1">
<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>

对齐

默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐

<ul class="dropdown-menu dropdown-menu-right" aria- labelledby="dLabel">
</ul>

分割线

在下拉菜单添加一条分割线，用于将多个链接分组

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
<li role="separator" class="divider"></li>
</ul>

总结

bootstrap中的下拉菜单，差不多就学了这么多。基本还挺简单，如果还有那不懂可以去http://www.bootcss.com/访问哦！