html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0}
.top{ 100%; height:100px; background:blue;}
.topNav{ 100%; height:50px; background:#09F;}
.topNavCenter{ 1000px; height:50px; margin:0 auto; background:#96C;}
.topNavCenter ul li{ list-style:none; float:left; 100px; height:50px; line-height:50px; text-indent:10px;}
.topNavCenter ul li a{ color:#fff; text-decoration:none;}
.topNavCenter ul li:hover{ background:#C39;}
.topNavCenter ul li ul{ display:none;}
/*.topNavCenter ul li:hover ul{ display:block;}*/
.topNavCenter ul li ul li{ border-top:1px solid #fff; height:30px; line-height:30px; background:#63F;}
.topNavCenter ul li ul li:hover{ background:#0FC; transition:2s;}
.main{ 1200px; height:700px; background:#F9C; margin:0 auto;}
</style>
<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
<script type="text/javascript">
$(function(){
//文档加载完毕后
//选中某个元素 $("")
//$(this)代表当前这个对象
//hover() 鼠标移入方法（鼠标移入事件，鼠标移出事件）
$(".topNavCenter ul li").hover(function(){
//鼠标移入 显示
//$(this).find("ul").css("display","block");
//$(this).find("ul").show(200); //show()显示
$(this).find("ul").fadeIn(2000); //fadeIn()淡入
},function(){
//鼠标移出
//$(this).find("ul").css("display","none");
//$(this).find("ul").hide(200); //hide()隐藏
$(this).find("ul").fadeOut(2000); //fadeOut() 淡出
});
})
</script>
</head>
<body>
<div class="top"></div>
<div class="topNav">
<div class="topNavCenter">
<ul>
<li><a href="#">学校概况</a>
<ul>
<li><a href="#">学校简介</a>
<li><a href="#">学校简介</a>
<li><a href="#">学校简介</a>
<li><a href="#">学校简介</a>
<li><a href="#">学校简介</a>
<li><a href="#">学校简介</a>
</ul>
</li>
<li><a href="#">机构设置</a></li>
<li><a href="#">人才培养</a>
<ul>
<li><a href="#">本科生培养</a>
<li><a href="#">本科生培养</a>
<li><a href="#">本科生培养</a>
<li><a href="#">本科生培养</a>
<li><a href="#">本科生培养</a>
<li><a href="#">本科生培养</a>
</ul>
</li>
<li><a href="#">科学研究</a></li>
<li><a href="#">招生就业</a></li>
<li><a href="#">学校概况</a></li>
<li><a href="#">机构设置</a></li>
<li><a href="#">人才培养</a></li>
<li><a href="#">科学研究</a></li>
<li><a href="#">招生就业</a></li>
</ul>
</div>
</div>
<div class="main"></div>
</body>
</html>
效果图实现如下：
