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

扁平化菜单功能制作

news 文章来源：https://blog.csdn.net/geng1025/article/details/135041854 2025/1/12 8:46:49

网页效果：

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();});});

相关文章：

扁平化菜单功能制作

网页效果&#xff1a; HTML部分&#xff1a; <body><ul class"nav"><li><a href"javascript:void(0);">菜单项目一</a><ul><li>子菜单项01</li><li>子菜单项02</li><li>子菜单项03<…...

编程日记 2023/12/18 0:22:08

网络基础——路由协议及ensp操作

目录 一、路由器及路由表 1.路由协议&#xff1a; 2.路由器转发原理&#xff1a; 3.路由表&#xff1a; 二、静态路由优缺点及特殊静态路由默认路由 1.静态路由的优缺点&#xff1a; 2.下一跳地址 3.默认路由 三、静态路由配置 四、补充备胎 平均负载 五、补充&…...

编程日记 2023/12/18 0:20:05

Python-折线图可视化

折线图可视化 1.JSON数据格式2.pyecharts模块介绍3.pyecharts快速入门4.创建折线图 1.JSON数据格式 1.1什么是JSON JSON是一种轻量级的数据交互格式。可以按照JSON指定的格式去组织和封装数据JSON本质上是一个带有特定格式的字符串 1.2主要功能json就是一种在各个编程语言中流…...

编程日记 2023/12/18 0:19:04

C++类与对象 (上）

目录 前言&#xff1a; 类和对象的理解 类的引入 类的定义与使用方式 访问限定符 类的两种定义方式 成员变量的命名规则 类的作用域 类的实例化 类对象模型 计算类对象的大小 类对象的存储方式 this指针 前言&#xff1a; C语言是面向过程的&#xff0c;关注的是过…...

编程日记 2023/12/18 0:16:02

no module named ‘xxx‘

目录结构如下 我想在GCNmodel的model里引入layers的GraphConvolution&#xff1a;from GCNmodel.layers import GraphConvolution&#xff0c;但这样却报错no module named GCNmodel&#xff0c;而且用from layers import GraphConvolution也不行。然后用sys.path.appen(xxx)…...

编程日记 2023/12/18 0:15:01

Go实现MapReduce

背景 当谈到处理大规模数据集时&#xff0c;MapReduce是一种备受欢迎的编程模型。它最初由Google开发&#xff0c;用于并行处理大规模数据以提取有价值的信息。MapReduce模型将大规模数据集分解成小块&#xff0c;然后对这些小块进行映射和归约操作&#xff0c;最终产生有用的…...

编程日记 2023/12/18 0:10:57

Axure的交互样式和情形

Axure的交互样式和情形 交互样式 Axure是一个流行的原型设计工具&#xff0c;它允许您创建交互式原型&#xff0c;模拟应用程序或网站的功能和用户界面。在Axure中&#xff0c;您可以设置各种交互样式来使原型更加生动和真实。 链接触发器&#xff1a;通过给一个元素添加链接…...

编程日记 2023/12/18 0:09:55

Mybatis在新增某个数据后，如何获取新增数据的id

在某些业务中&#xff0c;我们在新增一条数据之后&#xff0c;需要拿到这条数据的id来对这条数据进行后续的一个操作&#xff0c;如何拿取id呢&#xff1f; 使用的是<insert> 中的useGeneratedKeys 和 keyProperty 两个属性 1.在Mybatis Mapper文件中添加属性 “useGene…...

编程日记 2023/12/18 0:00:49

12.4~12.14概率论复习与相应理解（学习、复习、备考概率论，这一篇就够了）

未分配的题目 概率计算&#xff08;一些转换公式与全概率公式&#xff09;与实际概率 &#xff0c;贝叶斯 一些转换公式 相关性质计算 常规&#xff0c;公式的COV与P 复习相关公式 计算出新表达式的均值&#xff0c;方差&#xff0c;再套正态分布的公式 COV的运算性质 如…...

编程日记 2023/12/17 23:58:47

关于多重背包的笔记

多重背包可以看作01背包的拓展&#xff0c; 01背包是选或者不选。多重背包是选0个一直到选s个。 for (int i 1; i < n; i) {for (int j m; j > w[i]; --j){f[j] max(f[j], f[j - 1*w[i]] 1*v[i], f[j - 2*w[i]] 2*v[i],...f[j - s*w[i]] s*v[i]);} } 由上述伪代码…...

编程日记 2023/12/17 23:53:43

如何使用 Java 的反射

如何使用 Java 的反射&#xff1f; 通过一个全限类名创建一个对象 Class.forName(“全限类名”); 例如&#xff1a;com.mysql.jdbc.Driver Driver 类已经被加载到 jvm 中&#xff0c;并且完成了类的初始化工作就行了 类名.class; 获取 Class<&#xff1f;> clz 对象对…...

编程日记 2023/12/17 23:52:42

PLC-Recorder V3 修改服务器和客户端通讯端口的方法

PLC-Recorder V3是服务器和客户端的架构&#xff0c;他们之间用TCP通讯。如果客户端无法与服务器建立连接&#xff08;重启也无效&#xff0c;并且确保没有老版本的PLC-Recorder在运行&#xff09;&#xff0c;则可能是端口被占用了。这时候需要修改他们之间的通讯端口&#xf…...

编程日记 2023/12/17 23:49:39

libevent服务GET/POST的简单使用

目录 1、前言2、测试demo2.1、目录结构2.2、 测试源码2.2.1、http_server.cpp2.2.2、 http_server.h 2.3、 编译2.4、 运行结果2.4.1、测试POST2.4.2 、测试GET请求 1、前言 项目开发中经常需要使用到私有协议和Qt,Android等GUI前端通信&#xff0c;比较常用的使用POST和GET方式…...

编程日记 2023/12/17 23:48:38

MySQL 系列：注意 ORDER 和 LIMIT 联合使用的陷阱

文章目录 前言背后的原因ORDER BY 排序列存在相同值时返回顺序是不固定的LIMIT 和 ORDER BY 联合使用时的行为ORDER BY 或 GROUP BY 和 LIMIT 联合使用优化器默认使用有序索引 如何解决其它说明个人简介 前言 不知道大家在在分页查询中有没有遇到过这个问题&#xff0c;分页查…...

编程日记 2023/12/17 23:47:37

通过实例理解OAuth2授权

在之前的《通过实例理解Go Web身份认证的几种方式[1]》和《通过实例理解Web应用授权的几种方式[2]》两篇文章中&#xff0c;我们对Web应用身份认证(AuthN)和授权(AuthZ)的几种方式做了介绍并配以实例增强理解。 在现实世界中&#xff0c;还有一大类的认证与授权是在前面的文章中…...

编程日记 2023/12/17 23:46:37

MATLAB2022安装下载教程

安装包需从夸克网盘自取&#xff1a; 链接&#xff1a;https://pan.quark.cn/s/373ffc9213a1 提取码&#xff1a;N7PW 1.将安装包解压 2.以管理员的身份运行文件夹中的setup文件 3.点击高级选项--->我有文件安装密钥 4. 选择【是】&#xff0c;进入下一步 5.输入密钥 0532…...

编程日记 2023/12/17 23:45:36

从零开始搭建Go语言开发环境

https://www.liwenzhou.com/posts/Go/install_go_dev/ “go 命令现在默认在模块感知模式下构建包&#xff0c;即使没有 go.mod 存在也是如此。 “您可以将 GO111MODULE 设置为 auto&#xff0c;仅当当前目录或任何父目录中存在 go.mod 文件时&#xff0c;才能启用模块感知模式…...

编程日记 2023/12/17 23:44:34

vite+vue3+ts+tsx+ant-design-vue项目框架搭建

参与公司项目开发一段时间了&#xff0c;项目用到了很多新的技术&#xff08;vite,vue3,ts等等&#xff09;&#xff0c;但是框架都是别人搭好的&#xff0c;然后就想说如果是自己的话&#xff0c;会从零搭建一个吗&#xff0c;于是就有了这篇文章。 目录 一、涉及到的相关依…...

编程日记 2023/12/17 23:42:33

【5G PHY】5G小区类型、小区组和小区节点的概念介绍

博主未授权任何人或组织机构转载博主任何原创文章&#xff0c;感谢各位对原创的支持&#xff01; 博主链接 本人就职于国际知名终端厂商&#xff0c;负责modem芯片研发。 在5G早期负责终端数据业务层、核心网相关的开发工作&#xff0c;目前牵头6G算力网络技术标准研究。 博客…...

编程日记 2023/12/17 23:41:32

创建个人网站（一）从零开始配置环境，搭建项目

目录 前言配置环境前端后端遇到的问题1.安装了nvm和node&#xff0c;vscode没反应2.安装完脚手架之后vue指令不存在 vscode插件&#xff08;以后遇到好的会添进去&#xff09; 前言 从刚开始学前端的html直到现在前后端都有在开发&#xff0c;我一直都有一个想法&#xff0c;就…...

编程日记 2023/12/17 23:40:31

fripside - promise lrc

[ti:promise] [ed:2] [rt:20] [ml:0|0] [00:05.172]words:Satoshi Yaginuma, Shinichiro Yamashita [00:09.664]music&arrangement:Satoshi Yaginuma, Shigetoshi Yamada [00:14.565]PCゲーム「ENGAGE LINKS」 (Alcot) エンディングテーマ [00:20.000] [00:46.442]朝の陽射…...

编程日记 2023/12/17 23:39:30

网络连接和协议

网络连接是通过一系列协议来实现的&#xff0c;其中TCP/IP协议和HTTP协议是其中两个关键的协议。 1. **TCP/IP协议&#xff1a;** - TCP/IP&#xff08;Transmission Control Protocol/Internet Protocol&#xff09;是一组用于在互联网上传输数据的协议。它是一个层次化的…...

编程日记 2023/12/17 23:36:27

MySQL数据库，表的增量备份与恢复

1. 从物理与逻辑的角度 数据库备份可以分为物理备份和逻辑备份。物理备份是对数据库操作系统的物理文件&#xff08;如数据 文件&#xff0c;日志文件等&#xff09;的备份。这种类型的备份适用于在出现问题时需要快速恢复的大型重要数据库。 物理备份又可以分为冷备份&#xf…...

编程日记 2023/12/17 23:35:26

13.Spring 整合 Kafka + 发送系统通知 + 显示系统通知

目录 1.Spring 整合 Kafka 2.发送系统通知 2.1 封装事件对象 2.2 开发事件的生产者和消费者 2.3 触发事件&#xff1a;在评论、点赞、关注后通知​编辑 3.显示系统通知 3.1 通知列表 3.1.1 数据访问层 3.1.2 业务层 3.1.3 表现层 3.2 开发通知详情 3.2.1 开发数据…...

编程日记 2023/12/17 23:33:24

windows 服务器 怎么部署python 程序

一、要在 Windows 服务器上部署 Python 程序&#xff0c;您需要遵循以下步骤&#xff1a; 安装 Python&#xff1a;首先&#xff0c;在 Windows 服务器上安装 Python。您可以从官方网站&#xff08;https://www.python.org/downloads/windows/&#xff09;下载最新的 Python 安…...

编程日记 2023/12/17 23:31:20

Chapter 7 - 2. Congestion Management in Ethernet Storage Networks以太网存储网络的拥塞管理

Location of Ingress No-Drop Queues入口无损队列的位置 Ingress queues for no-drop traffic are maintained by all the ports in a lossless Ethernet network. For the sake of simplicity, Figure 7-1 shows ingress no-drop queue(s) only at one location, but in real…...

编程日记 2023/12/17 23:30:19

深入理解前端项目中的 package.json

在前端开发中&#xff0c;package.json 是一个很重要的文件&#xff0c;它在Node.js和前端项目中扮演着重要的角色。这个文件用于存储项目的元数据以及管理项目的依赖关系。 package.json 文件是每个Node.js项目和许多前端项目的核心。它不仅定义了项目的基本属性&#xff0c;…...

编程日记 2023/12/17 23:28:18

4-Docker命令之docker build

1.docker build介绍 docker build命令是用来使用Dockerfile文件创建镜像 2.docker build用法 docker build [参数] PATH | URL | - [root@centos79 ~]# docker build --helpUsage: docker buildx build [OPTIONS] PATH | URL | -Start a buildAliases:docker buildx build…...

编程日记 2023/12/17 23:27:15

Hdfs java API

1.在主机上启动hadoop sbin/start-all.sh 这里有一个小窍门&#xff0c;可以在本机上打开8088端口查看三台机器的连接状态&#xff0c;以及可以打开50070端口&#xff0c;查看hdfs文件状况。以我的主虚拟机为例&#xff0c;ip地址为192.168.198.200&#xff0c;所以可以采用下…...

编程日记 2023/12/17 23:24:13

大数据Doris（三十七）：索引和Rollup基本概念和案例演示

文章目录 索引和Rollup基本概念和案例演示 一、基本概念 二、 案例演示...

编程日记 2023/12/17 23:23:12

国外的旅游网站做的如何/网络服务公司

夜光序言&#xff1a; 曾经很爱你&#xff0c;之后以后再也不会了&#xff0c;再见你最后一次&#xff0c;再想你最后一次&#xff0c;我放手你走好&#xff0c;再见了我很爱的那个人。没有你的晚安我也会好好睡&#xff0c;没有你的问候我也能好好过&#xff0c;没有你的未来我…...

编程日记 2025/1/12 6:55:54

泉州网站制作设计/个人网页免费域名注册入口

1.场景 参数验证功能 1 是基于 JSR303 实现的&#xff0c;用户只需标识 JSR303 标准的验证 annotation&#xff0c;并通过声明 filter 来实现验证 2。 2.maven以依赖 <dependency><groupId>javax.validation</groupId><artifactId>validation-api</…...

编程日记 2025/1/12 6:35:38

东莞市手机网站建设/2345浏览器网站进入

一&#xff1a;什么是Ajax? Ajax&#xff1a;异步的JavaScript和XML&#xff0c;用于完成网页局部刷新功能&#xff08;修改少量数据只用局部刷新&#xff0c;不用再整个网页重新加载&#xff09;&#xff1b; XML的作用&#xff1a;1.是用于数据传输&#xff0c;但现在都在使…...

编程日记 2025/1/12 6:24:30

网站开发需求ppt/百度搜索优化关键词排名

其实在淘宝上面也有很多卖家都想要去打造属于自己店铺的爆款商品。 但是又不知道淘宝做爆款商品的目的是什么&#xff0c;也不知道爆款商品到底应该要怎么做&#xff0c;我马上就来给各位卖家介绍。 我们打造爆款是为了让我们通过爆款赚钱&#xff0c;通过爆款引来的流量带动其…...

编程日记 2025/1/12 4:51:47

误给传销公司做网站算犯罪吗/营销策划培训

1.网络层使用的中间设备叫路由器,其传输单元是____。 (1) 分组&#xff1b;数据报&#xff1b;Packet&#xff1b;数据包 2.网络层向其上一层运输层可以提供的两种服务为____和虚电路。 (1) 数据报&#xff1b;数据报服务&#xff1b;无连接的数据报服务&#xff1b;无连接的数…...

编程日记 2025/1/11 23:31:59

柳州住房和城乡建设厅网站/seo平台有哪些

这篇文章我想写给做IDC的朋友以及购买空间的朋友看的&#xff0c;因为关于这个问题一直以来就有很多含糊与误会的地方。我要提出的观点是&#xff0c;网站空间参数配置里写的IIS连接数并不等同于支持的并发在线人数。 相信做过IDC的朋友都碰见过这样的事情&#xff0c;经常有…...

编程日记 2025/1/11 20:19:22