bootstrap悬浮多级导航菜单

效果图：

源码：

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="utf-8"><title>多级导航菜单</title><meta name="description" content="多级导航菜单"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.dropdown:hover .menu-top {display: block;}.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 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: #cccccc;margin-top: 5px;margin-right: -10px;}.dropdown-submenu:hover>a:after {border-left-color: #ffffff;}.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><!-- 新 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"><!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script></head><body><div class="container collapse navbar-collapse navbar-ex1-collapse"><ul class="nav navbar-nav"><li class="active"><a href="#">Link</a></li><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Multi Level <b class="caret"></b></a><ul class="dropdown-menu menu-top">                      <li><a href="#">Level 1</a></li><li><a href="#">Level 1</a></li><li class="dropdown-submenu"> <a tabindex="-1" href="#">More options</a><ul class="dropdown-menu"><li><a tabindex="-1" href="#">Level 2</a></li><li class="dropdown-submenu"> <a href="#">More..</a><ul class="dropdown-menu"><li><a href="#">Level 3</a></li><li><a href="#">Level 3</a></li><li class="dropdown-submenu"> <a href="#">More..</a><ul class="dropdown-menu"><li><a href="#">Level 4</a></li><li><a href="#">Level 4</a></li><li class="dropdown-submenu"> <a href="#">More..</a><ul class="dropdown-menu"><li><a href="#">Level 5</a></li><li><a href="#">Level 5</a></li></ul></li></ul></li></ul></li><li><a href="#">Level 2</a></li><li><a href="#">Level 2</a></li></ul></li></ul></li>             </ul></div></body>
</html>

bootstrap悬浮多级导航菜单相关推荐

基于jQuery垂直多级导航菜单代码
基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载.效果图如下: 在线预览源码下载实现的代码. html代码: <ul class="ce& ...
【荐】CSS多级导航菜单
代码简介: CSS导航菜单,三级菜单,资源完整,超实用,希望大家喜欢. 代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...
【荐】自己做一款不错的JS+CSS多级导航菜单
代码简介: 自己做一款不错的二级导航菜单,黑色风格,是根据仿淘宝支付宝菜单而做的,自我感觉还算行吧. 代码内容: <!DOCTYPE HTML PUBLIC "-//W3C//DTD ...
AlphaControls 控件 TsFrameBar 创建下拉式多级导航菜单
AlphaControls 控件 TsFrameBar 创建下拉式多级导航菜单 TsFrameBar控件是创建一个下拉菜单的工具块. TsFrameBar控件本身,可以通过创建TITEMS,自 ...
Qt动态多级导航菜单
该控件使用QScrollArea.QPushButton.QWidget和QVboxLayout模拟树结构. /** 动态多级导航菜单* 内置5种皮肤.两种折叠/展开图标.顶层节点分割线显隐的功能* ...
element ui 菜单封装_vue+element UI实现多级导航菜单
1.前言在某次日常开发中,项目要求页面的导航菜单需要动态加载,即菜单不能在页面上写死,菜单上的数据由后端开发从数据库中获取返回给前端使用,前端拿到数据后再通过解析数据最终将菜单渲染出来.由于菜单有可 ...
html5导航栏悬浮置顶,jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单...
本文实例讲述了jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/D ...
响应式多级菜单侧边菜单栏_大菜单，小屏幕：响应式，多级导航
响应式多级菜单侧边菜单栏如果您曾经在响应式网站上工作,那么毫无疑问,您必须解决这个新兴领域中最棘手的问题之一:导航. 对于简单的导航,解决方案可以很简单. 但是,如果您要处理的事情比较复杂,可能有 ...
【转】ASP.NET 2.0 - 导航（Navigation）SiteMap导航菜单关系
ASP.NET 2.0 拥有内建的导航控件. 网站导航维护大型站点的导航菜单是很困难,也很费时的. 在 ASP.NET 2.0 中,菜单可存储在文件中,这样维护起来更加方便.这个文件通常名为 web ...

bootstrap悬浮多级导航菜单

bootstrap悬浮多级导航菜单

bootstrap悬浮多级导航菜单相关推荐

最新文章

热门文章