文档章节

jQurey导航

蒙娜丽莎对我笑了
 蒙娜丽莎对我笑了
发布于 2014/06/10 11:05
字数 519
阅读 24
收藏 0
<!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:737061077@qq.com	
* 	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;
}


© 著作权归作者所有

共有 人打赏支持
上一篇: ajax入门学习
下一篇: ajax入门学习
蒙娜丽莎对我笑了
粉丝 0
博文 2
码字总数 1276
作品 0
黄冈
私信 提问
多级菜单制作总结

在制作多级菜单的过程中,遇到了一些问题,花费了几天的时间才解决,途中几乎都想放弃自学了,但是还是坚持下来了。希望我的经历能帮助到自学的大家;如有前辈指教的话就更好了! 1:效果图:...

yujide
2016/05/17
206
1
jqurey学习碎片-0001-jquery初识入门

十多年一直在做传统公司的运营与管理,公司也逐步交给其他股东来做。基于兴趣,再次接触编程,宁静有趣的世界,从现在开始坚持编程学习的记录。1、关于十多年前的前端开发,记得09年初年初识...

wx599c47c7bdcad
2017/12/16
0
0
jqurey mobile页面转场后,怎么呼出手机键盘?

jqurey mobile页面转场后,怎么呼出手机键盘? 比如,点评论的时候,转到一个输入框页面,这时候手机键盘已经默认弹出来了。 请哪位高手帮忙解答一下。谢谢!

venpoo
2013/05/08
563
3
10 个非常有用的 jQuery 插件

1. jQuery Plugins For Overlay 2. GMAP3 jQuery Plugin 3. Simple Tooltip jQuery 4. jQuery Frome Validation engine Pulgin 5. Space Gallery Pulgin 6. Drop Down With CSS and jQuery 7......

红薯
2011/07/09
3K
4
如何修改套版語法的圖片(左/右的電話圖形)?

我本身會HTML、CSS跟一些jQurey 但是我都是自學的,所以不是專業的想知道如何換圖跟做網站的一些語法。因為只是換圖語法,非常簡單。我是從這裡抓套版語法的http://codepen.io/romswellparia...

jackie_hung
2016/08/24
93
0

没有更多内容

加载失败,请刷新页面

加载更多

Git工作原理

git跟传统的代码管理器(如svn)不同, 主要区别在于git多了个本地仓库以及缓存区,所以即使无法联网也一样能提交代码。 术语解释: 工作区间: 即我们创建的工程文件, 在编辑器可直观显示;...

Lienson
11分钟前
1
0
MySQL驱动对应Server版本、JDK版本

昨日生产上线,临时升级MySQL版本,导致连接不上。 应用JDK版本1.5 测试环境MySQL版本5.7 驱动版本5.1.40.jar 正常 生产环境MySQL版本8.0 驱动版本5.1.40.jar 连接不上 生产环境MySQL版本8.0...

zcjlq
12分钟前
7
0
千万级规模【高性能、高并发】互联网架构经验分羹

架构以及我理解中架构的本质 在开始谈我对架构本质的理解之前,先谈谈对今天技术沙龙主题的个人见解,千万级规模的网站感觉数量级是非常大的,对这个数量级我们战略上 要重 视 它 , 战术上又...

java知识分子
13分钟前
0
0
重磅!阿里巴巴工程师获得 containerd 社区席位,与社区共建云时代容器标准

重磅!阿里巴巴工程师获得 containerd 社区席位,与社区共建云时代容器标准 11 月 29 日,CNCF containerd 社区正式宣布:两位阿里巴巴工程师正式获得 containerd 社区席位,成为 containerd...

阿里云官方博客
14分钟前
0
0
你会用哪些JavaScript循环遍历

总结JavaScript中的循环遍历 定义一个数组和对象 const arr = ['a', 'b', 'c', 'd', 'e', 'f'];const obj = { a: 1, b: 2, c: 3, d: 4} for() 经常用来遍历数组元素 遍历值为数组...

peakedness丶
15分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部