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>
相关推荐
拉不动的猪几秒前
uniapp与React Native/vue 的简单对比
前端·vue.js·面试
z_mazin1 小时前
Chrome开发者工具实战:调试三剑客
前端·javascript·chrome·网络爬虫
sen_shan2 小时前
Vue3+Vite+TypeScript+Element Plus开发-04.静态菜单设计
前端·javascript·typescript·vue3·element·element plus·vue 动态菜单
旧识君3 小时前
移动端1px终极解决方案:Sass混合宏工程化实践
开发语言·前端·javascript·前端框架·less·sass·scss
吃没吃3 小时前
vue2.6-源码学习-Vue 核心入口文件分析
前端
Carlos_sam3 小时前
Openlayers:海量图形渲染之图片渲染
前端·javascript
XH2763 小时前
Android Retrofit用法详解
前端
鸭梨大大大3 小时前
Spring Web MVC入门
前端·spring·mvc
吃没吃3 小时前
vue2.6-源码学习-Vue 初始化流程分析 (src/core/instance/init.js)
前端
XH2763 小时前
Android Room用法详解
前端