扁平化菜单功能制作

网页效果:

HTML部分:

<body><ul class="nav"><li><a href="javascript:void(0);">菜单项目一</a><ul><li>子菜单项01</li><li>子菜单项02</li><li>子菜单项03</li><li>子菜单项04</li></ul></li><li><a href="javascript:void(0);">菜单项目二</a><ul><li>子菜单项01</li><li>子菜单项02</li><li>子菜单项03</li><li>子菜单项04</li></ul></li><li><a href="javascript:void(0);">菜单项目三</a><ul><li>子菜单项01</li><li>子菜单项02</li><li>子菜单项03</li><li>子菜单项04</li></ul></li><li><a href="javascript:void(0);">菜单项目四</a><ul><li>子菜单项01</li><li>子菜单项02</li><li>子菜单项03</li><li>子菜单项04</li></ul></li><li><a href="javascript:void(0);">菜单项目五</a><ul><li>子菜单项01</li><li>子菜单项02</li><li>子菜单项03</li><li>子菜单项04</li></ul></li></ul></body>

 CSS部分:

ul,li {margin: 0px;padding: 0px;list-style: none;}a {text-decoration: none;}.nav {width: 450px;height: 40px;list-style: none;margin: 50px auto;line-height: 40px;background-color: #333;color: #fff;}.nav>li {width: 82px;margin: 0px 5px;float: left;text-align: center;}.nav>li>a {width: 82px;height: 40px;line-height: 40px;text-align: center;display: block;color: #FFFFFF;transition: all .5s;}.nav>li>a:hover {background-color: #0c8ed9;}.nav>li:first-child {margin-left: 0px;}.nav>li:last-child {margin-right: 0px;}.nav>li>ul {line-height: 30px;display: none;}.nav>li>ul>li {background: #333;color: #EEE;}.nav>li>ul>li:hover {background: #666;color: #FFF;cursor: pointer;}

JS部分:

$(document).ready(function() {var $nav = $(".nav>li");$nav.mouseover(function() {$(this).children("ul").show();});$nav.mouseout(function() {$(this).children("ul").hide();});});

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

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

相关文章

matlab面向对象编程入门笔记

文章目录 1. 类和结构2. 定义类3. 属性3.1 private/protected/public属性3.2 constant属性3.3 hidden属性 4. 方法4.1 private/protected/public方法4.2 static方法4.3 外部方法 5. 动态调用6. 继承-超类6.1 handle超类6.2 dynamicprops 和 hgsetget子类 7. 封闭(sealed)类、方…

spring 项目中如何处理跨越cors问题

1.使用 CrossOrigin 注解 作用于controller 方法上 示例如下 RestController RequestMapping("/account") public class AccountController {CrossOriginGetMapping("/{id}")public Account retrieve(PathVariable Long id) {// ...}DeleteMapping(&quo…

波奇学Linux:Linux进程状态,进程优先级

编写一个程序模拟进程 查看进程状态 修改代码后发现进程状态为由S变成R R为运行态&#xff0c;S为阻塞态 第一次为S是因为调用了外设&#xff08;printf调用屏幕外设&#xff09;&#xff0c;实际上应该为R&#xff0c;S状态轮换&#xff0c;但是R太快了&#xff0c;所以每次…

性能测试之Locust(完整版)

官方文档&#xff1a;Locust说明文档 一、Locust简介 1、定义 Locust是一款易于使用的分布式负载测试工具&#xff0c;完全基于事件&#xff0c;即一个locust节点也可以在一个进程中支持数千并发用户&#xff0c;不使用回调&#xff0c;通过gevent使用轻量级过程&#xff08…

订单管理系统开发经验的总结:优化流程、提升效率的关键实践

前言 一.订单管理系统的架构设计 二.订单系统的详细设计 1.拆分 2.换货 3.发货 4.拦截 5.取消 6.物流回传 三.订单系统的订单状态流转 初始状态 中间状态 异常状态 终态 四.订单系统的关键代码逻辑 五.结语 前言 两年来&#xff0c;整个订单管理系统经过大大小…

序列生成模型(一):序列概率模型

文章目录 前言1. 序列数据2. 序列数据的潜在规律3. 序列概率模型的两个基本问题 一、序列概率模型1. 理论基础序列的概率分解自回归生成模型 2. 序列生成 前言 深度学习在处理序列数据方面取得了巨大的成功&#xff0c;尤其是在自然语言处理领域。序列数据可以是文本、声音、视…

【算法Hot100系列】三数之和

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

人生感悟 | 又是一年,眼看要2024了

哈喽&#xff0c;你好啊&#xff0c;我是雷工&#xff01; 刚过完大雪节气没两天&#xff0c;气温开始急转直下&#xff0c;走在路上明显感觉冷了许多。看天气预报很多地区已经开始下雪了。 看日历已经12月9号了&#xff0c;12月份&#xff0c;一年的最后一个月&#xff0c;2…

第24关 揭秘K8s部署优化:利用亲和性、反亲和性、污点、容忍和节点选择器的威力

------> 课程视频同步分享在今日头条和B站 大家好&#xff0c;我是博哥爱运维。 学习这些枯燥难懂的知识点&#xff0c;最好的方式就是利用实战内容进行讲解。在第12关 精通K8s下的Ingress-Nginx控制器&#xff1a;生产环境实战配置指南中&#xff0c;我们部署了ingress-n…

01 概述

概述 本套课程是2023年12月17日以后编写的&#xff0c;适用于NodeJS20Vite5Vue3的一套视频课&#xff0c;非常适合零基础入门学习Vue3的同学。 本套视频课的教案会免费发布在CSDN、公众号、知乎&#xff0c;简书、掘金等平台&#xff0c;视频课程则会发布在Bilibi网站。 环境…

如何处置网上的老旧信息优化品牌形象?

网络时代&#xff0c;企业没有秘密&#xff0c;一切信息都可以在互联网上找到蛛丝马迹。新企业创办初期往往面聊网络信息缺失&#xff0c;给客户一种不敢信任的感觉&#xff0c;这个时期小马识途建议企业积极发布企业消息&#xff0c;进行网络优化&#xff0c;快速塑造网络品牌…

别小看Python的【print】函数,这些高级用法你知道吗?

文章目录 引言技巧1&#xff1a;格式化输出示例1&#xff1a;使用%s来插入字符串&#xff0c;使用%d来插入整数示例2&#xff1a;使用字符串的format()方法示例3&#xff1a;使用f-string格式化输出 技巧2&#xff1a;控制输出文本的颜色技巧3&#xff1a;将打印结果重定向至文…

PyVMomi 克隆虚拟机时将磁盘改为Thin模式

需求介绍&#xff1a; 之前已经使用pyvmomi库实现了虚拟机的自动备份&#xff0c;不过由于备份的虚拟机都是较为重要的系统&#xff0c;磁盘都是厚置备模式&#xff0c;终于有一天&#xff0c;备份目标的空间不够了&#xff0c;导致几个虚拟机无法备份。在不想增加磁盘的情况下…

【计算机网络】—— 详解码元,传输速率的计算|网络奇缘系列|计算机网络

&#x1f308;个人主页: Aileen_0v0&#x1f525;系列专栏: 一见倾心,再见倾城 --- 计算机网络~&#x1f4ab;个人格言:"没有罗马,那就自己创造罗马~" 目录 码元 速率和波特 思考1 思考2 思考3 带宽&#xff08;Bandwidth&#xff09; &#x1f4dd;总结 码元…

YOLOv8算法改进【NO.95】使用在线卷积重新参数化(OREPA)方法改进C2_f模块

前 言 YOLO算法改进系列出到这,很多朋友问改进如何选择是最佳的,下面我就根据个人多年的写作发文章以及指导发文章的经验来看,按照优先顺序进行排序讲解YOLO算法改进方法的顺序选择。具体有需求的同学可以私信我沟通: 第一,创新主干特征提取网络,将整个Backbone改…

Linux+Docker+Gitee+Jenkins自动化部署.NET Core服务

目录 一、安装Jenkins 1、跟新yum包 2、查询镜像 3、拉取镜像 4、创建Jenkins工作目录&#xff0c;并将容器内目录挂载到此目录上 5、启动Jenkins容器 二、Jenkins配置 1、Jenkins安装gitee码云插件 2、创建私人令牌 3、Jenkins添加全局凭据 4、系统配置 三、构建任…

C++之程序生成

一、C的发展史 截止到2023年12月&#xff0c;C已经更新了很多版本&#xff0c;并在每个版本中修复了bug和添加了新的特性&#xff0c;ISO C委员会每三年会对C进行一次更新&#xff1a; C98&#xff1a;于1998年发布&#xff0c;是最早的国际标准化版本。它包含了面向对象编程…

Typescript中Omit数据类型的理解

在 TypeScript 中&#xff0c;Omit 是一个内置的工具类型&#xff0c;它用于从对象类型中排除指定的属性&#xff0c;并返回剩余的属性。 Omit 的语法如下所示&#xff1a; type Omit<T, K> Pick<T, Exclude<keyof T, K>>;其中&#xff0c;T 表示原始类型…

【Java后端】Servlet HTTP协议(学习笔记)

Servlet 一、Servlet概述 Servlet&#xff1a;server applet 服务器的小程序 Servlet是一个定义了Java类被浏览器访问到(tomcat识别)的规则接口 二、注解配置Servlet 创建JavaEE项目&#xff0c;选择Servlet的版本3.0以上&#xff0c;可以不创建web.xml定义一个类&#xf…

D3D12可编程渲染流水线

一、初始化D3D库 启用 DirectX数学库 x86需要启用SSE2指令集&#xff0c;所有平台均需将浮点模型设置为fast。默认为&#xff1a; 精度 (/fp:precise)。 #include <DirectXMath.h> #include <DirectXPackedVector.h> 启用调试模式下的内存泄漏检测 // Enabl…