jQuery实现二级菜单

news2025/3/15 15:09:13

jQuery怎么实现二级菜单呢？让我为大家演示一个例子！
上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style-type: none;
        }
        a {
            text-decoration: none;
            font-size: 14px;
        }
        .nav {
            margin: 100px;
        }
        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }
        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }
        .nav>li>a:hover {
            background-color: #eee;
        }       
        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }
        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }
        
        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li>
            <a href="#">一级菜单</a>
            <!-- 放二级菜单的ul -->
            <ul>
                <li>
                    <a href="#">二级菜单</a>
                </li>
                <li>
                    <a href="#">二级菜单</a>
                </li>
                <li>
                    <a href="#">二级菜单</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">一级菜单</a>
            <!-- 放二级菜单的ul -->
            <ul>
                <li>
                    <a href="#">二级菜单</a>
                </li>
                <li>
                    <a href="#">二级菜单</a>
                </li>
                <li>
                    <a href="#">二级菜单</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">一级菜单</a>
            <!-- 放二级菜单的ul -->
            <ul>
                <li>
                    <a href="#">二级菜单</a>
                </li>
                <li>
                    <a href="#">二级菜单</a>
                </li>
                <li>
                    <a href="#">二级菜单</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">一级菜单</a>
            <!-- 放二级菜单的ul -->
            <ul>
                <li>
                    <a href="#">二级菜单</a>
                </li>
                <li>
                    <a href="#">二级菜单</a>
                </li>
                <li>
                    <a href="#">二级菜单</a>
                </li>
            </ul>
        </li>
    </ul>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script>
        $(function() {
            // 鼠标经过
            $(".nav>li").mouseover(function() {
                // $(this) jQuery 当前元素  this不要加引号
                // 鼠标经过 显示元素
                $(this).children("ul").show()
            })
            // 鼠标离开
            $(".nav>li").mouseout(function() {
                // 鼠标离开 隐藏元素
                $(this).children("ul").hide()
            })
        })
    </script>
</body>
</html>

效果图：
请添加图片描述
感谢大家的阅读，如有不对的地方，可以向我提出，感谢大家!

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Spring源码系列-Spring事务

Spring源码系列-Spring事务

声明式事务 spring事务&#xff0c;是通过数据库连接来实现的&#xff0c;当前线程中保存了一个map&#xff0c;key是数据原&#xff0c;value是数据库连接 我们说的同一个事务&#xff0c;其实指的是同一个数据库连接&#xff0c;只有拥有同一个数据库连接才能同时提交和回滚。…
阅读更多...
C语言实现编写一个函数，输入n为偶数时，调用函数求1/2+1/4+...+1/n,当输入n为奇数时，调用函数1/1+1/3+...+1/n

C语言实现编写一个函数，输入n为偶数时，调用函数求1/2+1/4+...+1/n,当输入n为奇数时，调用函数1/1+1/3+...+1/n

完整代码&#xff1a; /*编写一个函数&#xff0c;输入n为偶数时&#xff0c;调用函数求1/21/4...1/n,当输入n为奇数时&#xff0c; 调用函数1/11/3...1/n */ #include<stdio.h>//n为偶数 double Odd(int n){double sum0;//i为2&#xff0c;4&#xff0c;6....for (int …
阅读更多...
mybatis的简单教程

mybatis的简单教程

整体就是mysql里存了一张表&#xff0c;然后在java程序里用mybatis把数据读出来的一个简单示例。 库 blog里有一张表 article 整个项目就是增加了这3个文件 首先是mybatis-config.xml文件 <?xml version"1.0" encoding"UTF-8" ?> <!DOCTYPE c…
阅读更多...
【Python】20大报告生成词云

【Python】20大报告生成词云

这个我其实写过一篇类似的博客&#xff0c;但是那个的文件对象是.csv&#xff0c;对应到.docx文件的话&#xff0c;就不太适用了。如下&#xff1a; Python生成词云-CSDN博客 代码&#xff1a; import jieba import os import wordcloud import numpy as np from PIL import…
阅读更多...
多测师肖sir_高级金牌讲师_ui自动化po框架版本01

多测师肖sir_高级金牌讲师_ui自动化po框架版本01

ui自动化po框架 一、po框架 1、基本介绍 &#xff08;1&#xff09;po模式是page object model的缩写&#xff08;简称&#xff1a;po或pom&#xff09; &#xff08;2&#xff09; po模式的核心思想&#xff1a;分层&#xff0c;实现耦合 实现&#xff1a;业务流程与页面元素操…
阅读更多...
n-gram语言模型——文本生成源码

n-gram语言模型——文本生成源码

n-gram语言模型——文本生成源码 n-gram模型的基本原理 文本生成的步骤 1. 准备和分词 2. 构建n-gram模型 3. 平滑技术的应用 4. 生成文本 源码 在自然语言处理的领域中&#xff0c;n-gram语言模型是一种基础而强大的工具。它通过考虑词汇的序列来预测文本内容&#xff…
阅读更多...
阿里大佬：DDD中Interface层、Application层的设计规范

阿里大佬：DDD中Interface层、Application层的设计规范

说在前面 在40岁老架构师 尼恩的读者交流群(50)中&#xff0c;最近有小伙伴拿到了一线互联网企业如阿里、滴滴、极兔、有赞、希音、百度、网易、美团的面试资格&#xff0c;遇到很多很重要的面试题&#xff1a; 谈谈你的DDD落地经验&#xff1f; 谈谈你对DDD的理解&#xff1f…
阅读更多...
redis主从复制+哨兵

redis主从复制+哨兵

1.主从复制 redis配置文件redis.conf master机器&#xff1a;IP 192.168.1.5 &#xff0c;端口 6379 设置配置参数 daemonize yes #bind 127.0.0.1 -::1 protected-mode no port 6379 dbfilename "dump.rdb" dir "/root/redis/my_redis_conf/dumpdir" l…
阅读更多...
深度学习工具的安装 CUDA Anaconda

深度学习工具的安装 CUDA Anaconda

深度学习工具安装 CUDA与CUDNN的安装 查看计算机是否支持CUDA 主要参考: 一看就懂的 CUDA安装教程及Pytorch GPU版本安装教程 次要参考: cuda安装 &#xff08;windows版&#xff09; cuDNN的验证 Anaconda的包装 anaconda下载安装包国内镜像源
阅读更多...
李峋同款的C语言动态爱心代码来了，彩色闪动，附源码

李峋同款的C语言动态爱心代码来了，彩色闪动，附源码

1.前言 最近一部电视剧《点燃我&#xff0c;温暖你》可火啦&#xff0c;大家纷纷在搞男主阿瑟的同款爱心代码&#xff0c;但是虽然网上有它的源码&#xff0c;但都不是 C 语言的&#xff0c;看不懂。我看了一下这个视频&#xff0c;大致分析了一下它的运行过程。用语言描述一下…
阅读更多...
【读点论文】结构化剪枝

【读点论文】结构化剪枝

结构化剪枝 在一个神经网络模型中&#xff0c;通常包含卷积层、汇合层、全连接层、非线形层等基本结构&#xff0c;通过这些基本结构的堆叠&#xff0c;最终形成我们所常用的深度神经网络。 早在 1998 年&#xff0c;LeCun 等人使用少数几个基本结构组成 5 层的 LeNet-5 网络&…
阅读更多...
Install Docker in Linux

Install Docker in Linux

Docker官网链接: https://docs.docker.com/ 1.确定Linux版本 新版本的Docker对Linux系统版本有一定的要求。如果Linux的发行版系统是centOS&#xff0c;安装最新版的docker需要centOS 7以上的系统。 在Docker安装帮助页面查看支持的系统版本。 Docker帮助页面:https://docs…
阅读更多...
C语言--青蛙跳台阶【内容超级详细】

C语言--青蛙跳台阶【内容超级详细】

今天与大家分享一下递归的经典题目--青蛙跳台阶问题。 一.引子 电影《少年班》&#x1f357;中的老师在全国各地寻找天才少年时&#xff0c;就问了一个这样的问题&#xff0c;有20阶台阶&#xff0c;每次只能上一阶或两阶&#xff0c;总共有多少种上法&#xff1f;这个少年王…
阅读更多...
web3 React Dapp书写订单 买入/取消操作

web3 React Dapp书写订单 买入/取消操作

好 上文web3 前端dapp从redux过滤出 (我创建与别人创建&#xff09;正在执行的订单 并展示在Table上中 我们过滤出了 我创建的 与 别人创建的 且 未完成 未取消的订单数据 这边 我们起一下 ganache 环境 ganache -d然后 我们项目 发布一下智能合约 truffle migrate --reset然…
阅读更多...
数据的属性与数据集，相似度，数据的质量，OLAP

数据的属性与数据集，相似度，数据的质量，OLAP

数据的属性与数据集&#xff1a; 2022找工作是学历、能力和运气的超强结合体&#xff0c;遇到寒冬&#xff0c;大厂不招人&#xff0c;可能很多算法学生都得去找开发&#xff0c;测开 测开的话&#xff0c;你就得学数据库&#xff0c;sql&#xff0c;oracle&#xff0c;尤其sq…
阅读更多...
[LeetCode] 5.最长回文子串

[LeetCode] 5.最长回文子串

一、题目描述 给你一个字符串 s&#xff0c;找到 s 中最长的回文子串。 如果字符串的反序与原始字符串相同&#xff0c;则该字符串称为回文字符串。 示例 1&#xff1a; 输入&#xff1a;s "babad" 输出&#xff1a;"bab" 解释&#xff1a;"aba&…
阅读更多...
【api_fox】ApiFox简单操作

【api_fox】ApiFox简单操作

1、get和post请求的区别&#xff1f;2、接口定义时的传参格式&#xff1f;3、保存接口文档 apifox当中接口文档的设计和接口用例的执行是分开的。 1、get和post请求的区别&#xff1f; 2、接口定义时的传参格式&#xff1f; 3、保存接口文档 就生成如下的接口文档。
阅读更多...
木板上的蚂蚁(c++题解)

木板上的蚂蚁(c++题解)

题目描述 有一块木板&#xff0c;长度为 n 个 单位 。一些蚂蚁在木板上移动&#xff0c;每只蚂蚁都以 每秒一个单位 的速度移动。其中&#xff0c;一部分蚂蚁向 左 移动&#xff0c;其他蚂蚁向 右 移动。 当两只向 不同 方向移动的蚂蚁在某个点相遇时&#xff0c;它们会同时改…
阅读更多...
移植LVGL到单片机的一个demo简单介绍

移植LVGL到单片机的一个demo简单介绍

简介 背景&#xff1a; 本文使用的是主控IC为stm32f103zet6, 显示IC为ST7735s&#xff0c;它是128*160的像素&#xff0c;色深为RGB565颜色。 官方虽然说LVGL移植平台只需 64kB 闪存和 8kB RAM 就足以满足简单的用户界面。但我移植到stm32f103c8t6&#xff0c;不管怎么修改配…
阅读更多...
Kubernetes基础(七)-Pod资源Limits与Requests

Kubernetes基础(七)-Pod资源Limits与Requests

在k8s的集群环境中&#xff0c;资源的合理分配和使用非常重要。毕竟容器化要解决的问题之一就是资源的充分利用。在集群中分配资源的时候就不得不提到Limits和Requests。 1 Namespace配额 Kubernetes 是允许管理员在命名空间中指定资源 Requests 和 Limits 的&#xff0c;这一…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023