标悬浮展开多级菜单

news/2025/10/17 19:44:15/文章来源:https://www.cnblogs.com/yushangyong/p/19148741
<!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.mzph.cn/news/939124.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深入解析Pure恶意软件家族:从RAT到构建器再到开发者

关键要点 Check Point Research对一次ClickFix活动进行了取证分析,该活动通过虚假工作机会诱骗受害者,导致持续八天的入侵。威胁行为者部署了多种工具,包括Rust加载器、PureHVNC RAT和Sliver命令与控制框架。 在本出…

Nimble:让SwiftObjective-C测试变得更优雅的匹配库 - 指南

Nimble:让SwiftObjective-C测试变得更优雅的匹配库 - 指南pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consol…

Ubuntu上配置Flask应用程序的Nginx和uWSGI

要在Ubuntu上配置Flask应用程序的Nginx和uWSGI,您可以按照以下步骤操作: 1. 安装Nginx: sudo apt updatesudo apt install nginx 2. 创建一个新的Nginx配置文件来处理Flask应用程序的请求: sudo nano /etc/ngin…

实验一 现代c++基础课程

#include <iostream> #include <string> #include <vector> #include <algorithm> template<typename T> void output(const T &c); void test1(); void test2(); void test3(); in…

平均融资利率求法及ORACLE语法解析

平均融资利率求法及ORACLE语法解析1.首先创造一个名为 PJRZCB_YD_RESULT_SET 的 OBJECT 类型注意其中不可以使用保留字段作为列名 , 如DATE 等, 否则可以创建 , 但无法被后续的 TABLE类型引用 CREATE OR REPLACE TYPE …

[Linux]如何列出被软链接的文件,列出被链接位置

# 先收集所有软链接及其目标find /path/to/search -type l -printf %p -> %l\n | while read link arrow target; do # 将相对路径转换为绝对路径(基于软链接所在目录) dir=$(dirname "$link") …

10.13课后作业

https://files.cnblogs.com/files/blogs/847771/10.13作业.rar?t=1760699755&download=true

【Linux】基础 I/O - 指南

【Linux】基础 I/O - 指南pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", &…

不情愿算法学概论

本文翻译自论文 Pessimisal Algorithms and Simplexity Analysis,这是一篇近四十年前发表的恶搞性质的文章。原文标题显然是 neta 自 Optimal Algorithms(最佳算法)和 Complexity Analysis(时间复杂度分析)。有兴…

DIVCNT

数学过菜了DIVCNT 1

软考-系统架构设计师 NoSQL数据库详细讲解 - 指南

pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", …

OMP: Error #15: Initializing libiomp5md.dll报错解决强大的方案

OMP: Error #15: Initializing libiomp5md.dll报错解决强大的方案2025-10-17 19:03 tlnshuju 阅读(0) 评论(0) 收藏 举报pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !im…

3. JVM 运行时数据区

本文内容基于个人对特定技术的理解和实践,或为对相关技术内容的整理与分享。请读者批判性阅读,如有疏漏或不准确之处,恳请斧正。 接续 2.JVM的类加载机制 类被加载到内存后,会保存在方法区或元空间中,根据JVM的划…

软工学习日志

今天上午尝试将hbase链接到idea,结果hbase出错了,后来发现是hadoop没启动,再试一次发现还是不行,一看log好像是上次启动在zookeeper残留的数据影响了,删除残余数据后重启hbase就okl

Pixelium Design:Vue3 的像素风 UI 组件库

👾 Pixelium Design:Vue3 的像素风 UI 组件库 Pixelium Design 是一个基于 Vue 3 的像素风 UI 组件库。我们从早期像素游戏的经典美学中汲取灵感,为现代 Web 应用带来复古风格的界面和体验。该项目的初衷是为开发者…

修电脑不求人:AI智能修复电脑工具的体验分享

前言 在日常工作和生活中,电脑偶尔出点小问题几乎是常态。 开机变慢、鼠标右键卡顿、桌面图标消失、系统响应迟缓,这些看上去不算严重的“小毛病”,往往足够让人心烦。 对很多人来说,修电脑的门槛不在“不会”,而…

效率与安全双升:AI许可证识别重塑医药行业合规流程

在关乎国计民生的医药行业,安全与效率是永恒的主题。医药供应链条长、参与方众多,从生产商、分销商、物流商到最终的药店和医疗机构,任何一个环节的疏漏都可能导致假药、劣药流入市场,威胁公众健康。在此背景下,药…

详细介绍:CI/CD流水线优化:GitLab CI镜像构建加速实战​

pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", …

Spring BeanPostProcessor 前置处理 afterPropertiesSet BeanPostProcessor 后置处理区别

目录1. BeanPostProcessor 前置处理(postProcessBeforeInitialization)2. afterPropertiesSet(InitializingBean接口方法)3. BeanPostProcessor 后置处理(postProcessAfterInitialization)总结:执行顺序与核心区…

Xcode上编译调试ffmpeg - 详解

Xcode上编译调试ffmpeg - 详解pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco"…