html三级菜单

示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Menu Example</title>

    <link rel="stylesheet" href="styles.css">

</head>

<style>

    body {

    font-family: Arial, sans-serif;

}

nav.menu ul {

    list-style: none;

    padding: 0;

    margin: 0;

}

nav.menu a {

    text-decoration: none;

    color: black;

    display: block;

    padding: 10px;

}

/* 一级菜单样式 */

nav.menu > ul > li {

    position: relative;

}

/* 二级菜单样式 */

nav.menu .submenu {

    display: none;

    position: absolute;

    top: 100%;

    left: 0;

    background-color: white;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

}

/* 三级菜单样式 */

nav.menu .submenu .submenu {

    top: 0;

    left: 100%;

}

/* 鼠标悬停样式 */

nav.menu ul li:hover > a {

    color: white;

    background-color: #11f;

}

nav.menu ul li:hover > .submenu {

    display: block;

}

/* 基本样式 */

body {

    font-family: Arial, sans-serif;

}

nav.menu ul {

    list-style: none;

    padding: 0;

    margin: 0;

}

nav.menu a {

    text-decoration: none;

    color: black;

    display: block;

    padding: 10px;

}

/* 一级菜单样式 */

nav.menu > ul > li {

    position: relative;

}

/* 二级菜单样式 */

nav.menu .submenu {

    display: none;

    position: absolute;

    top: 100%;

    left: 0;

    background-color: white;

    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); */

}

/* 三级菜单样式 */

nav.menu .submenu .submenu {

    top: 0;

    left: 100%;

}

/* 鼠标悬停样式 */

nav.menu ul li:hover > a {

    color: white;

    background-color: #521;

}

/* nav.menu ul li:hover > .submenu {

    display: block;

} */

</style>

<body>

    <nav class="menu">

        <ul>

            <li>

                <a href="#">一级菜单</a>

                <ul class="submenu">

                    <li>

                        <a href="#">二级菜单</a>

                        <ul class="submenu">

                            <li><a href="#">三级菜单</a></li>

                            <li><a href="#">三级菜单</a></li>

                        </ul>

                    </li>

                    <li><a href="#">二级菜单</a></li>

                </ul>

            </li>

            <!-- <li><a href="#">一级菜单</a></li> -->

        </ul>

    </nav>

</body>

</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/41152.shtml

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

相关文章

LED显示屏跟COB显示屏有哪些不同?

COB显示屏跟LED显示屏的主要区别在于产品的显示效果、封装技术、耐用性、防护力、维护以及制造成本方面的不同&#xff0c;这里所说的LED显示屏主要指的是使用SMD封装的LED显示屏&#xff0c;今天跟随COB显示屏厂家中品瑞科技一起来详细看看具体分析&#xff1a; 一、封装技术 …

品牌推广的深层逻辑:自我提升与市场认同的和谐共生

品牌推广的深层逻辑&#xff1a;自我提升与市场认同的和谐共生 著名飞行员查尔斯林德伯格(Charles Lindbergh) 曾写道:“改善生活方式比传播生活方式更重要。如果我们自己的生活方式使别人感到满意&#xff0c;那么它将自动蔓延。如果不是这样&#xff0c;那么任何武力都不可能…

如何在 Odoo 16 中继承和更新现有邮件模板

在本文中,让我们看看如何在 Odoo 16 中继承和编辑现有邮件模板。我们必须这样做才能对现有模板的内容进行任何调整或更新。让我们考虑一个在会计模块中更新邮件模板的示例。 单击“account.move”模型中的“发送并打印”按钮后,将打开上述向导。在这里,我们将进行更改。从…

8人团队历时半年打造开源版GPT-4o,零延迟演示引爆全网!人人可免费使用!

目录 01 Moshi 02 背后技术揭秘 GPT-4o可能要等到今年秋季才会公开。 然而&#xff0c;由法国8人团队开发的原生多模态Moshi&#xff0c;已经达到了接近GPT-4o的水平&#xff0c;现场演示几乎没有延迟&#xff0c;吸引了大量AI专家的关注。 令人惊讶的是&#xff0c;开源版的…

Python酷库之旅-第三方库Pandas(003)

目录 一、用法精讲 4、pandas.read_csv函数 4-1、语法 4-2、参数 4-3、功能 4-4、返回值 4-5、说明 4-6、用法 4-6-1、创建csv文件 4-6-2、代码示例 4-6-3、结果输出 二、推荐阅读 1、Python筑基之旅 2、Python函数之旅 3、Python算法之旅 4、Python魔法之旅 …

T100-XG查询报表的开发

制作XG报表 1、注册程序 azzi900 首先现将程序注册一下,在内部构建基础代码档。 2、注册作业 azzi910 也是直接新增一个,作业跟程序绑定一下。 3、T100签出规格程序 这个时候应该是没签出的,首先将规格迁出。 4、T100画面产生器 规格迁出之后,这个时候还需要生成一个画…

springcloud-gateway 网关组件中文文档

Spring Cloud网关 Greenwich SR5 该项目提供了一个基于Spring生态系统的API网关&#xff0c;其中包括&#xff1a;Spring 5&#xff0c;Spring Boot 2和项目Reactor。Spring Cloud网关的目的是提供一种简单而有效的方法来路由到API&#xff0c;并向它们提供跨领域的关注&#x…

配置基于不同IP地址的虚拟主机

定义配置文件vhost.conf <directory /www> allowoverride none require all granted </directory> <virtualhost 192.168.209.136:80> documentroot /www servername 192.168.209.136 </virtualhost><virtualhost 192.168.209.138:80> document…

Restore Equipment

Restore Equipment 魔兽世界 - 盗号申请 - 恢复装备流程 魔兽和网易真的不行啊 1&#xff09;这个装备本来就是兑换的竟然可以卖NPC 2&#xff09;针对这个情况竟然无法挽回 3&#xff09;设计理念真的不得不吐槽一下 4&#xff09;策划真的不咋样&#xff0c;要是有机会我要自…

【C++】 解决 C++ 语言报错:Stack Overflow

文章目录 引言 栈溢出&#xff08;Stack Overflow&#xff09;是 C 编程中常见且严重的错误之一。栈溢出通常发生在程序递归调用过深或分配过大的局部变量时&#xff0c;导致栈空间耗尽。栈溢出不仅会导致程序崩溃&#xff0c;还可能引发不可预测的行为。本文将深入探讨栈溢出…

Linux系统安装青龙面板结合内网穿透实现使用公网地址远程访问

文章目录 前言一、前期准备本教程环境为&#xff1a;Centos7&#xff0c;可以跑Docker的系统都可以使用。本教程使用Docker部署青龙&#xff0c;如何安装Docker详见&#xff1a; 二、安装青龙面板三、映射本地部署的青龙面板至公网四、使用固定公网地址访问本地部署的青龙面板 …

【带你全面了解 RAG,深入探讨其核心范式、关键技术及未来趋势】

文末有福利&#xff01; 大型语言模型&#xff08;LLMs&#xff09;已经成为我们生活和工作的一部分&#xff0c;它们以惊人的多功能性和智能化改变了我们与信息的互动方式。 然而&#xff0c;尽管它们的能力令人印象深刻&#xff0c;但它们并非无懈可击。这些模型可能会产生…

HY lisp quote unquote等学习

​ 宏相关语法糖 This is all resolved at the reader level, so the model that gets produced is the same whether you take your code with sugar or without. Macro Syntax quote FORM quasiquote FORM unquote ~FORM unquote-splice ~FORM unpack-iterable …

昇思25天学习打卡营第16天 | DCGAN生成漫画头像

这两天把minspore配置到我的电脑上了&#xff0c;然后运行就没什么问题了✨&#x1f60a; 今天学这个DCGAN生成漫画头像&#xff0c;我超级感兴趣的嘞&#x1f984;&#x1f970; GAN基础原理 这部分原理介绍参考GAN图像生成。 DCGAN原理 DCGAN&#xff08;深度卷积对抗生成…

秒验—手机号码置换接口

功能说明 提交客户端获取到的token、opToken等数据&#xff0c;验证后返回手机号码 服务端务必不要缓存DNS&#xff0c;否则可能影响服务高可用性 调用地址 POST https://identify-verify.dutils.com/auth/auth/sdkClientFreeLogin 请求头 Content-Type &#xff1a;appli…

图书商城系统java项目ssm项目jsp项目java课程设计java毕业设计

文章目录 图书商城系统一、项目演示二、项目介绍三、部分功能截图四、部分代码展示五、底部获取项目源码&#xff08;9.9&#xffe5;带走&#xff09; 图书商城系统 一、项目演示 图书商城系统 二、项目介绍 语言: Java 数据库&#xff1a;MySQL 技术栈&#xff1a;SpringS…

SaaS行业的AI化征程:穿越“大模型焦虑”,拥抱“AI自信”

随着大模型技术的风起云涌&#xff0c;SaaS行业正站在一个充满机遇与挑战的十字路口。本文旨在深入剖析SaaS厂商在AI化升级过程中所遭遇的“大模型焦虑”&#xff0c;并探索通过战略性的AI应用策略&#xff0c;如何重拾信心&#xff0c;实现产品与服务的华丽转身&#xff0c;为…

关于虚拟机上不了网的解决办法

先ping出ip地址 或者查询ifconfig得到目前网络信息 继续输入命令Ifconfig -a查询是否能找到ip地址 明显ens33是没有打开的&#xff0c;所以找不到分配的ip地址&#xff0c;需要打开&#xff0c;自动随机分配ip 输入命令&#xff1a; sudo dhclient ens33 现在就可以开始上网…

公司“领导”们竟如此讨论工作!小伙:此事有蹊跷;|国家漏洞库CNNVD:关于OpenSSH安全漏洞的通报;

公司“领导”们竟如此讨论工作&#xff01;小伙&#xff1a;此事有蹊跷 “当时我正在等验证码 还好你们快了一步 不然公司的93万余元就没了” 一谈到这件事 杜先生仍然心有余悸 近日 正在处理公司财务工作的杜先生 突然被拉进了一个QQ群聊 从头像、昵称上看 群聊里的竟…

累积分布函数的一些性质证明

性质1&#xff1a; E [ X ] ∫ 0 ∞ ( 1 − F ( x ) ) d x − ∫ − ∞ 0 F ( x ) d x ( 1 ) E[X]\int_0^{\infty}(1-F(x))dx - \int_{-\infty}^0F(x)dx\quad (1) E[X]∫0∞​(1−F(x))dx−∫−∞0​F(x)dx(1) 证明&#xff1a; E [ X ] ∫ − ∞ ∞ x p ( x ) d x E[X] …