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个精彩的专题：

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

您可能感兴趣的文章:

webpack使用及如何搭建cesium三维地球环境
这篇文章主要介绍了webpack快速上手之搭建cesium三维地球环境,本文使用的是webpack5，webpack5 升级后默认是不支持polyfill的，编译时会报错，本文主要介绍了Cesium以及Webpack的使用，如何将Cesium一步步地集成到Webpack中，需要的朋友可以参考下
2023-11-11
简单的渐变轮播插件
本文主要介绍了简单的渐变轮播插件，具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
关于js中for in的缺陷浅析
这篇文章主要介绍了js中for in的缺陷，有需要的朋友可以参考一下
2013-12-12
js实现二代身份证号码验证详解
本文给大家分享一段超级全面的二代身份证号码验证程序，由JS编写而成，可以校验身份证的地址码、出生日期码、顺序码和数字校验码。是身份证去伪存真的一大利器。
2014-11-11
JS动画效果打开、关闭层的实现方法
这篇文章主要介绍了JS动画效果打开、关闭层的实现方法,可实现js控制层从中心位置打开与关闭的功能,涉及javascript操作页面元素的相关技巧,需要的朋友可以参考下
2015-05-05
js手动播放图片实现图片轮播效果
这篇文章主要为大家详细介绍了js手动播放图片实现图片轮播效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-09-09
uniapp组件uni-popup弹出层的使用
弹出层组件用于弹出一个覆盖到页面上的内容，本文主要介绍了uniapp组件uni-popup弹出层的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-03-03
javascript 身份证号码验证函数(可辨真伪，支持15或18位身份证号)测试误差为0
javascript 身份证号码验证函数(可辨真伪，支持15或18位身份证号)测试误差为0 ，非常不错，其实主要是特别熟悉身份证的算法。
2010-05-05
事件模型在各浏览器中存在差异
根据 W3C DOM 2 Events 描述，EventTarget 接口被所有支持 DOM 事件模型的节点（Node）实现。该接口提供addEventListener 和removeEventListener方法，用来绑定或解绑一个 EventListeners 接口到一个 EventTarget。
2010-10-10
微信小程序页面间值传递的两种方法
这篇文章主要介绍了微信小程序-页面间值传递的2种方法，每种方法通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-11-11

bootstrap实现二级下拉菜单效果

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具