jQurey导航

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=7" />
<title>导航</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/jquery-1.7.2.min.js"></script>
<!--[if IE 6]>
	<script src="js/DD_belatedPNG_0.0.8a-min.js" ></script>
	<script>
	DD_belatedPNG.fix('body,.nav');
	</script>
<![endif]-->
</head>
<body>
		<div class="nav">
			<ul class="clearfix">
				<li><a href="#">首页</a></li>
				<li><a href="#">公司简介</a></li>
				<li><a href="#">行业资讯</a></li>
				<li id="pro"><a href="#">产品中心</a>
					<dl>
		        <dd><a href="#">组织芯片产品</a></dd>
		        <dd><a href="#">组织芯片定制</a></dd>
					</dl>
				</li>
				<li id="jy"><a href="#">基因检测</a>
						<dl>
							<dd><a href="#">无创产前DNA检测</a></dd>
							<dd><a href="#">单基因病遗传检测</a></dd>
							<dd><a href="#">新生儿耳聋基因检测</a></dd>
							<dd><a href="#">新生儿遗传代谢检测</a></dd>
							<dd><a href="#">Y染色体DNA检测</a></dd>
		        </dd>
					</dl>				
				</li>
				<li id="gxh"><a href="#">个性化用药</a>
					<dl>
							<dd><a href="#">孕期叶酸代谢</a></dd>
							<dd><a href="#">基因检测</a></dd>
					</dl>				
				</li>
				<li><a href="#">联系我们</a></li>
				<li><a href="#">在线留言</a></li>
			</ul>
		</div>	
		<script type="text/javascript">
				$(function(){
						$(".nav li").hover(function()
						{
								$(this).addClass("select");
						},function()
						{
								$(this).removeClass("select");
						})
				})
		</script>
</body>
</html>

@charset "utf-8";
/*
* 	CSS Document
*	Author:Mr.Huang
*	Email:[email protected]	
* 	LastModify:2014/06/10
*/

/*ResetCss*/
body,div,ul,ol,li,dl,dt,dd,a,
input,select,textarea,
pre,q,blockquote,fieldset,lengend,p,
form,button,h1,h2,h3,h4,h5,h6,table,tr,td {
	margin:0px;
	padding:0px;
}
body {
	background:#fff url(../images/header_bg.png) repeat-x left top;
	font-family:tahoma,"\5b8b\4f53";
	font-size:12px;
	font-weight:normal;
	color:#555;
}
ul li {list-style:none;text-decoration:none;}
a {text-decoration:none;color:#555;}
a:visited:{color:#555;}
a:hover {text-decoration:none;color:#555;}
img,a img {border:none;vertical-align:middle;-ms-interpolation-mode:bicubic;}
input,select {vertical-align:middle;overflow:visible;}
table {border-collapse:collapse;border-spacing:0;}


.nav{margin:100px auto 0px auto;width:950px;height:39px;z-index:99;position:relative;}
.nav ul li{float:left;height:39px;background:url(../images/navBor.png) no-repeat right center; overflow:hidden;padding:0 2px 0 0px;}
.nav ul li a{display:block;float:left;height:39px;font:500 14px/39px "Microsoft Yahei",tahoma;color:#FFF !important;padding:0 25px;}
.nav li dl {display: none;}
.nav .select dl{
		display:block;
		position:absolute;
		width:120px;
		left:0px;
		top: 39px;
}
.nav .select dl dd {
		width:180px;
		height:32px;
		opacity:0.95;
		filter:Alpha(opacity=95);
		text-align:center;
		background:#3E7DC9 url(../images/nav.png) left top repeat-x;
}
.nav .select dl dd a {
	display:block;
	color: #8aa9cf;
	height:32px;
	line-height:32px;
}
.nav #pro dl {
		left:280px;
		width:180px;
}
.nav #jy dl {
		left: 370px;
		width:180px;
}
.nav #gxh dl {
		left:510px;
		width:180px;
}


你可能感兴趣的:(jQurey导航)