bootstrap实现二级下拉菜单效果

本文实例为大家分享了bootstrap实现二级下拉菜单展示的具体代码，供大家参考，具体内容如下

<!DOCTYPE html> 
<html> 
<head> 
 <title>Bootstrap 实例 - 基本的按钮下拉菜单</title> 
 <link href=http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css rel="stylesheet"> 
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 
 <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 
 <style type="text/css"> 
  .dropdown-submenu { 
   position: relative; 
  } 
  .dropdown-submenu > .dropdown-menu { 
   top: 0; 
   left: 100%; 
   margin-top: -6px; 
   margin-left: -1px; 
   -webkit-border-radius: 0 6px 6px 6px; 
   -moz-border-radius: 0 6px 6px; 
   border-radius: 0 6px 6px 6px; 
  } 
  .dropdown-submenu:hover > .dropdown-menu { 
   display: block; 
  } 
  .dropdown-submenu > a:after { 
   display: block; 
   content: " "; 
   float: right; 
   width: 0; 
   height: 0; 
   border-color: transparent; 
   border-style: solid; 
   border-width: 5px 0 5px 5px; 
   border-left-color: #ccc; 
   margin-top: 5px; 
   margin-right: -10px; 
  } 
  .dropdown-submenu:hover > a:after { 
   border-left-color: #fff; 
  } 
  .dropdown-submenu.pull-left { 
   float: none; 
  } 
  .dropdown-submenu.pull-left > .dropdown-menu { 
   left: -100%; 
   margin-left: 10px; 
   -webkit-border-radius: 6px 0 6px 6px; 
   -moz-border-radius: 6px 0 6px 6px; 
   border-radius: 6px 0 6px 6px; 
  } 
 </style> 
</head> 
<body> 
 
 
<div class="btn-group"> 
 <button type="button" class="btn btn-default">原始</button> 
 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
  <span class="caret"></span> 
 </button> 
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> 
  <li><a href="#">另一个功能</a></li> 
  <li><a href="#">其他</a></li> 
  <li class="divider"></li> 
  <li class="dropdown-submenu"> 
   <a href="#">More options </a> 
   <ul class="dropdown-menu"> 
    <li> 
     <a href="#">另一个功能1</a> 
    </li> 
   </ul>  
  </li> 
 </ul> 
</div> 
 
 
</body> 
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持积木网。

Bootstrap 3多级下拉菜单实例
Bootstrap虽好，但对于复杂的界面，还是有N多组件需要自己扩展，并且要往简洁、大气的Bootstrap界面上靠，着实要费一些功夫。下面分享一个Bootstrap3的多

bootstrap datetimepicker控件位置异常的解决方法
今天在写毕设的时候，用到了bootstrap-datetimepicker作为日期控件。在git上clone下最新的代码，运行demo，发现控件区域整体下移1000px左右。作为一个准备拿

详解bootstrap导航栏.nav与.navbar区别
刚刚看了bootstrap的导航栏，发现有点弄混了，现在来整理一下；导航栏是一个很好的功能，是Bootstrap网站的一个突出特点。导航栏在您的应用或网站中