浏览器运行结果:
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>