PC端导航——鼠标移入缓慢展开菜单

鼠标移入导航（菜单）改变字体颜色、背景颜色；
鼠标移入导航缓慢展开菜单；

两种JS都可以实现
JS

<script type="text/javascript">
	$(function() {
		//法一：
		$(".topnav li").each(function() {
			$(this).mouseover(function() {
				$(this).children('').next('ul.subnav').stop(true, true).delay(4).slideDown();
			})
			$(this).mouseleave(function() {
				$(this).children('').next('ul.subnav').stop(true, true).delay(1).slideUp();
			})
		});
		//法二：
		$(".topnav li").hover(function() {
			$(this).find("ul.subnav").stop().slideDown('slow')
		}, function() {
			$(this).find("ul.subnav").stop().slideUp('fast')
		})
	})
</script>

CSS

a{
	color: #333;
}
#header {
	color: #333;
	width: 960px;
	margin: 0 auto;
	position: relative;
}
.topnav {
	display: block;
	float: left;
	font-weight: bold;
	margin: 0 auto;
	width: 960px;
}
.topnav li {
	list-style: none;
	position: relative;
	float: left;
}
.topnav li:hover{
	background-color: #017c3e;
}
.topnav li a {
	text-decoration: none;
	font-size: 16px;
	padding: 15px 20px;
	display: inline-block;
}
.topnav li:hover .topnavL{
	color: #fff;
}
.topnav li a:visited {
	text-decoration: none;
}
.topnav li .subnav {
	list-style-type: none;
	display: none;
	position: absolute;
	left: 0;
	top: 51px;
	float: left;
}
.topnav li ul.subnav li {
	float: left;
	background: #f3f3f3;
	clear: both;
	border-top: 1px solid #FFFFFF;
	width: 150px;
}
.topnav li ul.subnav li:hover{
	background-color:  #017c3e;;
}
.topnav li ul.subnav li a {
	font-size: 14px;
	float: left;
	line-height: 30px;
}
.topnav li ul.subnav li:hover .topnavSubL{
	color:  #fff;;
}

HTML

<div id="header">
	<ul class="topnav">
		<li>
			<a href="#" class="topnavL">首页</a>
		</li>
		<li>
			<a href="#" class="topnavL">关于我们</a>
			<ul class="subnav">
				<li>
					<a href="#" class="topnavSubL"> 公司简介</a>
				</li>
				<li>
					<a href="#" class="topnavSubL">公司历程</a>
				</li>
				<li>
					<a href="#" class="topnavSubL">荣誉资质</a>
				</li>
			</ul>
		</li>
		<li>
			<a href="#" class="topnavL">相关产品</a>
			<ul class="subnav">
				<li>
					<a href="#" class="topnavSubL">产品1</a>
				</li>
				<li>
					<a href="#" class="topnavSubL">产品2</a>
				</li>
			</ul>
		</li>
		<li>
			<a href="#" class="topnavL">新闻动态</a>
			<ul class="subnav">
				<li>
					<a href="#" class="topnavSubL">公司新闻</a>
				</li>
				<li>
					<a href="#" class="topnavSubL">行业新闻</a>
				</li>
			</ul>
		</li>
		<li>
			<a href="#" class="topnavL">客户案例</a>
			<ul class="subnav">
				<li>
					<a href="#" class="topnavSubL">案例1</a>
				</li>
				<li>
					<a href="#" class="topnavSubL">案例2</a>
				</li>
			</ul>
		</li>
		<li>
			<a href="#" class="topnavL">联系我们</a>
		</li>
	</ul>
</div>

效果图如下：
鼠标移入前：

鼠标移入后：

如有错误或不足，欢迎各位大佬评论指正。