当前位置: 首页 > news >正文

标悬浮展开多级菜单

<!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>

image

http://www.rkmt.cn/news/23154.html

相关文章:

  • 深入解析Pure恶意软件家族:从RAT到构建器再到开发者
  • 3. JVM 运行时数据区
  • 软工学习日志
  • 修电脑不求人:AI智能修复电脑工具的体验分享
  • Xcode上编译调试ffmpeg - 详解
  • 《程序员修炼之道》阅读笔记1
  • OOP - 实验一
  • 题解:qoj8329 Excuse
  • VMware17.6图文安装教程(附安装包)VMware17.6
  • Sourcetree - Git 备份
  • uni-app x实现上下拉动,动态加载数据
  • 企业微信ipad协议稳定防封的最新最全功能
  • 企业微信协议ipad,稳定防封私有化部署私域流量聚合聊天,机器人实现方案
  • 重新思考钓鱼攻击意识培训:网络安全的关键反思
  • 任务分解与小模型如何降低AI成本
  • spring事件监听的核心机制
  • freeswitch的proxy_media模式下video流的问题与修正
  • DNS 相关
  • Dubbo入门-通过spring-boot来动手实践
  • 使用ceph rdb做k8s后端存储(ceph-csi storageclass
  • 2025 最新火烧板源头厂家推荐排行榜:自有矿山加持 + 品质卓越,芝麻灰 / 五莲花等石材采购优选指南
  • 【IEEE出版、吉首大学主办】第二届智能机器人与自动控制国际学术会议 (IRAC 2025)
  • 2025 防火隔断厂家最新推荐排行榜:甲级防火玻璃隔断厂家深度测评,精选优质品牌助力采购决策
  • 作业3
  • 2025 年最新推荐!国内优质球墨铸铁管厂家排行榜,涵盖市政 / 给水 / 水利工程用管,助力采购高效选材
  • 用于博客美化的测试(后面再更新)
  • 看图猜成语达人小程序:一站式趣味与变现解决方案
  • Metasploit Pro 4.22.8-20251014 (Linux, Windows) - 专业渗透测试框架
  • 高考语文 词类活用
  • 2025年市面上景观灯品牌推荐排行榜:权威解析与选择指南