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>
相关推荐
brief of gali11 分钟前
记录一个奇怪的前端布局现象
前端
Json_181790144801 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网2 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02042 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing2 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月2 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆2 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China2 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q2 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海2 小时前
Chrome离线安装包下载
前端·chrome