web前端 JQuery下拉菜单的案例

news2025/3/15 20:24:19

浏览器运行结果:

JQuery下载:

链接:https://pan.baidu.com/s/17LXZigLQ8yau0toTGj4P_Q?pwd=4332 
提取码:4332

代码:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">

<title>下拉菜单</title>
	
<style type="text/css">
        * {
            margin:0 auto;
            padding: 0;
        }
        
        li {
            list-style: none;
        }
        
        a {
            text-decoration: none;
          	background-color:#CCC;
			color:#000;
        }
        
        .nav {
			width:700px;
			height:300px;
            margin:0 500px;
            float: left;
            font-size: 26px;
			
        }
        
        .nav>li {
            float: left;
            text-align: center;
        }
        
        .nav>li a {
			
			margin-right:2px;
            display: block;
            padding: 10px 20px;
			
        }
        
        .nav>li ul li {			
            cursor: pointer;
            padding: 10px 20px;
			background-color:#CCC;
            border: 1px solid #000;
           
        }
        
        .nav>li ul {
            display: none;
        }
        
        .nav>li ul li:hover {
            background-color:red;
        }
		p{float:left;padding:0 500px;position:relative;top:80px;z-index:-999;}
</style>
<script src="./jquery-3.7.1.min.js"></script>
    <script>
        $(function() {
            // 鼠标经过nav里面的li
            $('.nav>li').mouseenter(function() {
                // 显示下面的下拉菜单
                $(this).children('ul').stop().toggle("normal");
            });
            // 鼠标离开后又隐藏
            $('.nav>li').mouseleave(function() {
                $(this).children('ul').hide();
            })
        })
  </script>
</head> 
<body>
 <p>dfsfsfsfssdfsfsfsfsfsfsfdffsfsdfs</p>  

  <!-- <script>  $(function() { })
    			$('nav').find('li:eq(3)').css({'width':'fixed'});
    </script>-->
    <ul class="nav">
       
        <li><a href="#">首页</a></li>
        
        <li><a href="#">社会新闻</a>
            <ul>
                <li>中央地方</li>
                <li>地方新闻</li>
                <li>回顾</li>
                <li>专题</li>
            </ul>
        </li>
        <li><a href="#">经济圈</a>
            <ul>
                <li>朋友圈</li>
                <li>人脉圈</li>
                <li>QQ圈</li>
                
            </ul>
        </li>
        <li>
            <a href="#">政治</a>
            <ul>
            	<li>十七大</li>
                <li>十八大</li>
                <li>十九大</li>
                <li>二十大</li>
            </ul>
        </li>
        <li><a href="#">政治评论员</a></li>
        
</ul>     
 
</body>
 
</html>
</body>
</html>

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

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

相关文章

Emu2:37亿参数开创多模态生成新篇章

引言 多模态任务在人工智能领域一直是极具挑战性的「技术高地」。智源研究院最近开源发布的新一代多模态基础模型Emu2&#xff0c;在这一领域取得了突破性进展。Emu2以其庞大的37亿参数规模和强大的多模态生成能力&#xff0c;为AI的多模态理解和生成开启了新的篇章。 模型概…

【重点!!!】【贪心】45.跳跃游戏II

题目 法1&#xff1a;贪心 贪心是最优解法&#xff0c;必须掌握&#xff01;重点理解&#xff0c;看B站视频辅助&#xff01;&#xff01;&#xff01; 在具体的实现中&#xff0c;我们维护当前能够到达的最大下标位置&#xff0c;记为边界。我们从左到右遍历数组&#xff0…

记账导出excel表格,用表格导出账目数据

我们每天都在跟金钱打交道,记账则是更好地管理自己财务的一种方式&#xff0c;传统记账不仅繁琐&#xff0c;还容易出错。那么&#xff0c;有没有简单、高效的记账方式呢&#xff1f;答案是肯定的&#xff01;今天&#xff0c;我们就向大家推荐一款全新的记账软件——晨曦记账本…

Windows系统重启Redis服务

Windows系统 在安装Redis的目录下打开终端 执行 redis-cli.exe shutdown先停止 Redis 服务 然后 执行 redis-server.exe启动Redis服务

数字 IC 设计职位经典笔/面试题,建议收藏!

共100道经典笔试、面试题目&#xff08;文末可全领&#xff09; 什么是同步逻辑和异步逻辑&#xff1f; 同步逻辑是时钟之间有固定的因果关系。异步逻辑是各时钟之间没有固定的因果关系。同步时序逻辑电路的特点&#xff1a;各触发器的时钟端全部连接在一起&#xff0c;并接在…

[大厂实践] DoorDash基于eBPF的监控实践

eBPF是监控云原生应用的强大工具&#xff0c;本文介绍了DoorDash构建基于eBPF的监控系统的实践。原文: BPFAgent: eBPF for Monitoring at DoorDash 随着DoorDash在过去几年中经历了快速增长&#xff0c;我们开始看到传统监控方法的局限性。度量、日志和跟踪提供了服务生态系统…

el-table中表头自定义动态渲染

el-table中有时候我们可能遇到需要表头自定义以数组的形式进行循环显示 当我们改变tableHead时我们自定义的表头没有跟随渲染 有人会使用this.$refs.table.doLayout这个只能动态渲染更换数据布局 会对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时&#xff…

论文分享 | SINGFAKE:歌声深度伪造检测

以下文章来源于智能语音新青年 &#xff0c;作者ttslr 论文地址&#xff1a; https://arxiv.org/pdf/2309.07525.pdf 合成歌声的兴起给艺术家和行业利益相关者带来了未经授权使用歌声的严峻挑战。与合成语音不同&#xff0c;合成歌声通常是在含有强烈背景音乐的歌曲中发布的&a…

2024年最新的人工智能工程师证书 已经开始报名了

2024年最新的人工智能工程师证书 已经开始报名了&#xff0c;以下有报考条件和证书样式可做参考&#xff1a; 计算机自然语言及语音处理设计开发工程师&#xff08;中级&#xff09; 计算机视觉处理设计开发工程师&#xff08;中级&#xff09; 1.人工智能工程师证书培训对象 …

Codeforces Round 917 (Div. 2)

Codeforces Round 917 (Div. 2) Codeforces Round 917 (Div. 2) A. Least Product 题意&#xff1a; 给出整数数组a&#xff0c;现在可以执行任意次数以下操作&#xff1a;任意选择数组a的一个元素 a i a_i ai​&#xff0c;若 a i a_i ai​>0可以任意替换为[0, a i a_i…

网络的七层结构模型

网络的七层结构模型&#xff0c;亦称OSI&#xff08;Open Systems Interconnection&#xff09;模型&#xff0c;包括物理层、数据链路层、网络层、传输层、会话层、表示层和应用层。以下是各层的主要功能&#xff1a; 从下往上分别是1-7&#xff0c;总共7层&#xff0c;每一层…

【NI-RIO入门】记录和监控数据

1.内部存储器 可以使用常规文件 I/O VI 在嵌入式程序中以编程方式访问实时控制器的内部存储。文件路径结构根据控制器运行的实时操作系统 (RTOS) 的不同而有所不同。 该文件路径语法记录在教程&#xff1a;使用实时目标上的文件路径 中。 可以通过在Measurement & Automati…

全国5米土地利用遥感监测数据(GB/T 21010-2017)

全国5米土地利用遥感监测数据 全国5米土地利用类型遥感监测空间分布数据&#xff0c;是基于谷歌高分辨率影像数据人机交互解译形成&#xff0c;并使用POI数据、ROI数据进行数据修正。根据GB/T 21010-2017《土地利用现状分类》将土地利用类型分为12个一级类&#xff0c;73个二级…

SpringBoot 3.2.0 基于Logback定制日志框架

依赖版本 JDK 17 Spring Boot 3.2.0 工程源码&#xff1a;Gitee 日志门面和日志实现 日志门面&#xff08;如Slf4j&#xff09;就是一个标准&#xff0c;同JDBC一样来制定“规则”&#xff0c;把不同的日志系统的实现进行了具体的抽象化&#xff0c;只提供了统一的日志使用接…

SAP ME21/22/23N 创建增强ME_PROCESS_PO_CUST

增强ME_PROCESS_PO_CUST 二、实现方式&#xff1a;实现的方式可以有很多种&#xff0c;这里讲一下用BADI增强ME_PROCESS_PO_CUST实现的方式 第一步&#xff1a;执行事务码se19,在BAdI Name处输入&#xff1a;ME_PROCESS_PO_CUST&#xff0c;然后点“Create Impl”按钮 第二步…

鸿蒙列表,item组件封装传参问题?@ObjectLink 和@Observerd

鸿蒙列表渲染&#xff0c;封装内容组件&#xff0c;进行item传参会报错&#xff1f; class FoodClass {order_id: number 0food_name: string ""food_price: number 0food_count: number 0 }Entry Component struct Demo07 {State message: string Hello World…

C练习——不创建临时变量,交换两个数值

面试可能会问 方法一&#xff08;有缺陷&#xff0c;int 型数值有上限&#xff0c;ab可能超范围&#xff09; // int 型数值有上限&#xff0c;ab可能超范围 #include <stdio.h> int main() {int a 2;int b 3;printf("交换前&#xff1a;%d %d\n", a, b);a…

SpringBoot整合JWT+Spring Security+Redis实现登录拦截(一)登录认证

一、JWT简介 JWT 全称 JSON Web Token&#xff0c;JWT 主要用于用户登录鉴权&#xff0c;当用户登录之后&#xff0c;返回给前端一个Token&#xff0c;之后用户利用Token进行信息交互。 除了JWT认证之外&#xff0c;比较传统的还有Session认证&#xff0c;如何选择可以查看之前…

基于单片机的语音识别自动避障小车(论文+源码)

1.系统设计 此次基于单片机的语音识别自动避障小车&#xff0c;以STC89C52单片机作为系统的主控制器&#xff0c;利用超声波模块来实现小车与障碍物距离的测量并通过LCD液晶显示&#xff0c;当距离低于阈值时会通过WT588语音模块进行报警提示&#xff0c;并且小车会后退来躲避…

知识付费saas租户平台的核心功能设计:打造高效、个性化的学习体验

在在当今数字化时代&#xff0c;知识付费市场正在迅速崛起&#xff0c;而私域流量的概念也日益受到重视。私域流量指的是企业通过自有渠道获取的、能够自由支配的流量&#xff0c;这种流量具有更高的用户粘性和转化率。因此&#xff0c;打造一个基于私域流量的知识付费小程序平…