先上html代码（有不懂的可以在下方评论留言）
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1,user-scalable=no">
<title>首页</title>
<link rel="stylesheet" href="css/reset.css"> <!-- 重置样式 -->
</head>
<body>
<!-- header start -->
<header>
<div class="header wrap">
<a href="/" class="logo lt"><img src="images/public/logo.png" alt=""></a>
<ul class="nav rt">
<li class="active"><a href="">首页</a><span></span></li>
<li>
<a href="">走进城投</a><span></span>
<ul class="level">
<li><a href="">集团简介</a></li>
<li><a href="">组织机构</a></li>
<li><a href="">城投文化</a></li>
<div class="clear"></div>
</ul>
</li>
<li>
<a href="">城投业务</a><span></span>
<ul class="level">
<li><a href="">城投业务</a></li>
<li><a href="">城市基础设施建设</a></li>
<div class="clear"></div>
</ul>
</li>
<li>
<a href="">党政建设</a><span></span>
<ul class="level">
<li><a href="">企业党建</a></li>
<li><a href="">纪检监察</a></li>
<li><a href="">群团动态</a></li>
<div class="clear"></div>
</ul>
</li>
<li>
<a href="">城投动态</a><span></span>
<ul class="level">
<li><a href="">集团要闻</a></li>
<li><a href="">视频新闻</a></li>
<div class="clear"></div>
</ul>
</li>
<li>
<a href="">联系我们</a><span></span>
<ul class="level">
<li><a href="">人才招聘</a></li>
<li><a href="">联系方式</a></li>
<li><a href="">互动服务</a></li>
<div class="clear"></div>
</ul>
</li>
<div class="clear"></div>
</ul>
<div class="clear"></div>
</div>
</header>
<!-- header end -->
<div class="banner">
<img src="images/index/banner.png" alt="">
</div><script src="js/jquery-3.1.1.min.js"></script>css代码
<style>
.banner{position: relative;}
.banner>img{ display: inline-block; width: 100%;}
header{position: absolute;top: 0;left: 0;width: 100%;z-index: 100;padding: 20px 0 0;
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.2)); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.2)); /* Firefox 3.6 - 15 */
background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.2)); /* 标准的语法（必须放在最后） */
}
header .nav>li{float: left;padding: 15px 22px 0;text-align: center;position: relative;}
header .nav>li>a{font-size: 20px;color: #fff; -webkit-transition: all .4s;-moz-transition: all .4s;-o-transition: all .4s;transition: all .4s;}
header .nav>li>span{display: block;color: #fff; -webkit-transition: all .4s;-moz-transition: all .4s;-o-transition: all .4s;transition: all .4s;font-size: 12px;padding:10px 0;opacity: 0;background: url(../images/public/act.png) no-repeat center;height: 12px;}
header .nav>li:nth-child(6){padding-right: 0;}
header .nav>li:hover>a,header .nav>li.active>a{color: #006aff}
header .nav>li:hover>span,header .nav>li.active>span{color: #006aff;opacity: 1;}
.nav .level{display: none;position: absolute;left: 50%;top: 100%;background: rgba(0,0,0,.3);width: auto;width: 340px;border-radius: 10px;transform: translateX(-50%);padding: 0 15px;box-sizing: border-box;}
.nav .level li{float: left;text-align: center;height: 30px;line-height: 30px;padding: 0 15px;}
.nav .level li a{font-size: 18px;color: #fff; -webkit-transition: all .4s;-moz-transition: all .4s;-o-transition: all .4s;transition: all .4s;}
.nav .level li:hover a{color: #006aff;}
</style>下面就是jQuery代码部分了
// 导航
$(function(){
// 鼠标移入事件
$('.nav>li').mousemove(function(){
$(this).addClass('active').siblings('li').removeClass('active') // 为li添加名为active的class，并移除兄弟元素（li）上的名为active的class名
$(this).children('.level').css("display","block"); // 使li的子元素level显示
})
// 鼠标移出事件
$('.nav>li').mouseleave(function(){
$(this).children('.level').css("display","none"); //使li的子元素level显示
})
})$(this).children('.level').css("display","block");这样显示出来会显得比较生硬，改为
$(this).children('.level').show();后可以使显示增加一些效果，（）中可以设置过渡时间，以毫秒为单位，比如
$(this).children('.level').show(200); // 过渡时间为200毫秒 1000毫秒等于1秒整体效果如下图
源码下载
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
