bootstrap的下拉菜单组件与导航条

前期准备：bootstrap的css文件和js文件先引入

Bootstrap 组件-拉下菜单(class+js)

下拉菜单必需三级结构

<div class="dropdown"> 父元素

<a data-toggle="dropdown">触发元素</a>

<div/ul class="dropdown-menu">隐藏元素</ul/div>

</div>

 <div class="container">
   <h1>组件-下拉菜单-自定义菜单</h1>
   <div class="dropdown">
     <a href="#" data-qiehuan="xiala1">西餐厅</a>
     <ul class="dropdown-menu">
       <li><a href="#">咖啡</a></li>
       <li><a href="#">汉堡</a></li>
       <li><a href="#">披萨</a></li>
     </ul>
   </div>
   <h1>组件-下拉菜单-bootstrap</h1>
   <div class="dropdown">
     <a href="#" data-toggle="dropdown">中餐厅</a>
     <ul class="dropdown-menu">
       <li><a href="#">油条</a></li>
       <li><a href="#">豆浆</a></li>
       <li><a href="#">包子</a></li>
     </ul>
   </div>
   <h1>稍复杂下拉菜单-bootclass拓展</h1>
   <div class="dropdown">
     <a href="#" data-toggle="dropdown">葫芦娃</a>
     <ul class="dropdown-menu">
       <li><a href="#" class="dropdown-header">单数娃系列</a></li>
       <li><a href="#">大娃</a></li>
       <li><a href="#">三娃</a></li>
       <li><a href="#">五娃</a></li>
       <li><a href="#">七娃</a></li>
       <li><a href="#" class="dropdown-header">双娃系列</a></li>
       <li><a href="#">二娃</a></li>
       <li><a href="#">四娃</a></li>
       <li><a href="#">六娃</a></li>
     </ul>
   </div>

 </div>