web前端 JQuery下拉菜单的案例

浏览器运行结果:

JQuery下载:

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

提取码:4332

代码:

css 复制代码
<!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>
相关推荐
vvilkim1 分钟前
React 与 Vue 虚拟 DOM 实现原理深度对比:从理论到实践
前端·vue.js·react.js
天天扭码5 分钟前
在项目中常见的main.js和main.mjs有什么区别,我们该如何选择?
前端·javascript·面试
姑苏洛言14 分钟前
在开发扫码小程序中,遇到胡坑“require() 默认不支持绝对路径”及其解决方案
前端
Passerby_K15 分钟前
vue3+dhtmlx 甘特图真是案例
前端·vue·甘特图
佳腾_21 分钟前
【Web应用服务器_Tomcat】二、Tomcat 核心配置与集群搭建
java·前端·中间件·tomcat·web应用服务器
brzhang1 小时前
代码即图表:dbdiagram.io让数据库建模变得简单高效
前端·后端·架构
SummerGao.1 小时前
【解决】layui layer的提示框,弹出框一闪而过的问题
前端·layui
天天扭码2 小时前
从数组到对象:JavaScript 遍历语法全解析(ES5 到 ES6 + 超详细指南)
前端·javascript·面试
拉不动的猪2 小时前
前端开发中常见的数据结构优化问题
前端·javascript·面试
街尾杂货店&2 小时前
css word
前端·css