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>
相关推荐
excel12 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼13 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping13 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙14 小时前
[译] Composition in CSS
前端·css
白水清风14 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix14 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780014 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端14 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧14 小时前
Promise 的使用
前端·javascript
NBtab15 小时前
Vite + Vue3项目版本更新检查与页面自动刷新方案
前端