bootstrap实现二级下拉菜单效果

更新时间：2017年11月23日 10:14:37 作者：l_zhao1213

这篇文章主要为大家详细介绍了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>

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

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

您可能感兴趣的文章:

es6 filter() 数组过滤方法总结
这篇文章主要介绍了es6 filter() 数组过滤方法总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
webpack源码中一些精妙的方法总结
正好最近在学习webpack的源码,所以下面这篇文章主要给大家介绍了关于webpack源码中一些精妙的方法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-02-02
javascript与cookie 的问题详解
这篇文章介绍了javascript与cookie 的问题，有需要的朋友可以参考一下
2013-11-11
微信小程序返回上一级页面的实现代码
这篇文章主要介绍了微信小程序返回上一级页面的实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-06-06
关于JS中的apply,call,bind的深入解析
下面小编就为大家带来一篇关于JS中的apply,call,bind的深入解析。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-04-04
从对象列表中获取一个对象的方法,依据关键字和值
下面小编就为大家带来一篇从对象列表中获取一个对象的方法,依据关键字和值。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
有趣的思路~~JS仿 WINXP 注销桌面渐隐效果
有趣的思路~~JS仿 WINXP 注销桌面渐隐效果...
2006-10-10
JavaScript静态作用域和动态作用域实例详解
这篇文章主要介绍了JavaScript静态作用域和动态作用域的实例代码，本文通过文字实例代码相结合的形式给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-06-06
JavaScript时间复杂度和空间复杂度
这篇文章主要介绍了JavaScript时间复杂度和空间复杂度，时间复杂度和空间复杂度是衡量一个算法是否优秀的标准，通常我们比较两个算法时会用预先估算和事后统计，下文详细介绍，需要的朋友可以参考一下
2022-07-07
关于uniapp的request封装保姆级教程
这篇文章主要给大家介绍了关于uniapp的request封装保姆级教程,request是基于uni-app框架封装的一个网络请求库,可以用于发送http请求和处理响应数据,需要的朋友可以参考下
2023-07-07