文档章节

jQurey导航

蒙娜丽莎对我笑了
 蒙娜丽莎对我笑了
发布于 2014/06/10 11:05
字数 519
阅读 23
收藏 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;
}


© 著作权归作者所有

共有 人打赏支持
蒙娜丽莎对我笑了
粉丝 0
博文 2
码字总数 1276
作品 0
黄冈
多级菜单制作总结

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

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

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

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

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

venpoo
2013/05/08
541
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
调用Bootstrap.js 报错 "e is not a function"

这是关于Bootstrap.js的报错TypeError:e is not a function. !function(e){... 还有关于jqurey.paper.js 的报错 ReferenceError:jQuery is not defined ...})(jQuery) 还有自定义的js中 报错......

切切
2013/11/28
4.9K
3

没有更多内容

加载失败,请刷新页面

加载更多

并发编程—Java多线程总结

目录 先了解几个概念 多线程:进程和线程是一对多的关系,一个进程(一个程序),由不同的线程来运行。有共享的空间也有独立的空间。 并行: 同时进行,拿两个cpu来跑同样的程序同样的代码片段...

Java干货分享
8分钟前
0
0
Windows Update真的需要向Linux学习

| 虽然简单地将驱动程序从典型的Windows更新中分离出来可能是一种防止这种情况发生的方法,但是Linux甚至更进一步,让用户能够更好地控制他们可以安装的驱动程序。像Ubuntu和Linux Mint这样的...

Linux就该这么学
9分钟前
0
0
Linux学习-0926

4.5/4.6 磁盘格式化 4.7/4.8 磁盘挂载 4.9 手动增加swap分区 一、磁盘格式化 磁盘进行分区后如果不进行格式化,是无法使用的。 linux系统的文件类型: 可以使用使用以下方式进行查看linux系统...

wxy丶
10分钟前
0
0
elasticsearch安装

elasticsearch安装 一、下载: wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-5.6.1.tar.gz 二、解压: tar zxvf elasticsearch-5.6.1.tar.gz 三、改名: ......

小杰java
12分钟前
0
0
Vue router传参 四

传递的方法 //传递<router-link :to="{path:'',query:{id:123}}">产品</router-link>//获取this.$route.query.id 这里可以传params 相当于POST 但 :to里面只能是name query 相当......

大灰狼wow
23分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部