<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<script type="text/javascript" src="jquery-1.11.3.min.js">
</script>
<script type="text/javascript">
$( function(){

$("#nav ul li").hover(
					  function(){
						  $(this).children("ul").attr("style","display:block;")
						  },
                  function() {
                     $(this).children("ul").attr("style", "");
                  }
				  ) <!-- hover end-->

$("#menu ul li").hover(
					  function(){
						  $(this).children("ul").attr("style","display:block;")
						  },
                  function() {
                     $(this).children("ul").attr("style", "");
                  }
				  ) <!-- hover end-->

	});
</script>
<style type="text/css">
body{ margin:0px auto}
ul{ list-style:none}
a { text-decoration:none;color:#9E7FF9;}
a:hover{color:#238dba; }

/*横向nav导航 Begin*/
#nav ul { margin:0px auto;  }
#nav ul li { width:100px; height:28px; line-height:28px; float:left; text-align:center;  position:relative; } /*相对定位*/
#nav ul li ul { margin:0px; padding:0px; display:none; position:absolute; left:0px; top:28px;} /*绝对定位 top 的高度*/
/* 伪类 IE6 不支持，需用JS实现；很关键，鼠标经过时
#nav ul li:hover ul { display:block;}
*/
#nav ul li ul li{ width:100px;background:#fff;  } /*此处背景色很关键,否则IE6 会有BUG，hover失效*/
/*横向nav导航 End*/

/*纵向menu导航 Begin*/
#menu ul { margin:0px auto;  }
#menu ul li { width:80px; height:28px; line-height:28px; text-align:center;  position:relative; background:#FFF } /*相对定位*/
#menu ul li ul { margin:0px; padding:0px; display:none; position:absolute; left:80px; top:0px;} /*绝对定位 left 的位置*/
/* 伪类 IE6 不支持，需用JS实现；很关键，鼠标经过时
#nav ul li:hover ul { display:block;}
*/
#menu ul li ul li{ width:100px;background:#fff;  } /*此处背景色很关键,否则IE6 会有BUG，hover失效*/
/*纵向menu导航 End*/

</style>
<title>jQuery nav menu</title>
</head>
<body>

<div id="nav"  style=" float:left; width:600px; height:28px; line-height:28px; background:#d4d4d4">
<ul>
	<li><a href="#">首 页</a></li>
	<li><a href="#">介 绍</a></li>
	<li><a href="#">新 闻</a>
		<ul>
		<li><a href="#">国内新闻</a></li>
		<li><a href="#">国外新闻</a></li>
        <li><a href="#">国内新闻</a></li>
		<li><a href="#">国外新闻</a></li>
		</ul>
	</li>
	<li><a href="#">产 品</a>
		<ul>
		<li><a href="#">主打产品</a></li>
		<li><a href="#">热门产品</a></li>
        <li><a href="#">主打产品</a></li>
		<li><a href="#">热门产品</a></li>
		</ul>
	</li>
	<li><a href="#">关 于</a></li>
</ul>
	</div>

<div id="menu"  style="width:150px; height:200px; position:absolute; left:0px; top:100px;"  >
<ul>
	<li><a href="#">首 页</a></li>
	<li><a href="#">介 绍</a></li>
	<li><a href="#">新 闻</a>
		<ul>
		<li><a href="#">国内新闻</a></li>
		<li><a href="#">国外新闻</a></li>
        <li><a href="#">国内新闻</a></li>
		<li><a href="#">国外新闻</a></li>
		</ul>
	</li>
	<li><a href="#">产 品</a>
		<ul>
		<li><a href="#">主打产品</a></li>
		<li><a href="#">热门产品</a></li>
        <li><a href="#">主打产品</a></li>
		<li><a href="#">热门产品</a></li>
		</ul>
	</li>
	<li><a href="#">关 于</a></li>
</ul>
</div>

</body>
</html>

先 总结：

1、IE6 不支持a标签之外的伪类；

2、IE6 做多级导航需要用到 相对定位和绝对定位，用到left和top;

3、IE6 需要给 2级li 设置背景色，否则hover 往下滑动，离开1级li后，2级li 会消失；

4、jQuery 写的更少，做的更多。

为什么学习html+css+jQuery:

因为公司OA上线将近2年，断断续续的 写了一些WebForm+jQuery+EasyUI+ashx的小程序，在这个时候理解了园子和坛子一些大神说的AJAX前端和后端服务器程序分离的概念，加深了对三层的 理解，但是公司前端雄狮离职，美工MM找到我，改一些asp页面，我才发现很多html 的基础概念都没有理解，想想8年前我也是用ASP复制粘贴过网站的人，现在脑子里想到的是去哪里复制、粘贴。然后拿到界面效果图(产品展示，一页8个，2列4行)，才发现几句jQuery append+div就可以搞定。所以觉得非常有必要再度巩固。

感悟：

十几年前，在网吧看到有姑娘在用记事本手敲HTML代码，觉得不屑一顾，这么简单的东西，还用的着这样反复练习。现在才知道这样的姑娘才真正的掌握了学习方法，那时候的网页三剑客正大行其道... ...

而现在，golive、frontpage已经消失了。

姑娘，你现在在哪里。

HTML+CSS+jQuery 纵向导航 && 横向导航 && 消除IE6 BUG && 感悟怎样学习的更多相关文章

  1. 十天学会<div+css>横向导航菜单和纵向导航菜单

    纵向导航菜单及二级弹出菜单 纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...

  2. css横向导航条

    css横向导航条有两种方法 1. ul li a li{float:left} #navlist li, #navlist a{height:44px;display:block;} a{width: ...

  3. 如何使用css、布局横向导航栏

    使用css布局横向导航栏,css应用给网页样式的方式,就相当于,给人怎么去穿上衣服,不同的衣服有不同的穿法,这里我们使用的是内联式.在这里 我们可以适当的把值调的大一点,这样我们就可以很容易的对比. ...

  4. 利用CSS制作背景变色的横向导航栏

    1.表单 页面如下: <html> <head> <title>注册表单页面</title> </head> <body> &l ...

  5. 利用jquery实现百度新闻导航菜单滑动动画

    前言 前两天,群里有人问百度新闻导航是如何实现的,当时由于忙于工作,没有来得及细看,恰好今天有空闲时间,索性就实现一下这个效果吧: 思路与步骤 1.利用UL创建简单横向导航: <!DOCTYPE ...

  6. web标准(复习)--7 横向导航菜单

    今天我们开始学习html列表,包含以下内容和知识点: 横向列表菜单 用图片美化的横向导航 css Sprites 一.横向列表菜单前边学习过纵向导航菜单,又学习了float属性,那么要实现横向导航菜单 ...

  7. 【Web】利用jquery实现百度新闻导航菜单滑动动画

    前言 前两天,群里有人问百度新闻导航是如何实现的,当时由于忙于工作,没有来得及细看,恰好今天有空闲时间,索性就实现一下这个效果吧: 思路与步骤 1.利用UL创建简单横向导航: <!DOCTYPE ...

  8. JQUERY 插件开发——MENU（导航菜单）

    JQUERY 插件开发——MENU(导航菜单) 故事背景:由于最近太忙了,已经很久没有写jquery插件开发系列了.但是凭着自己对这方面的爱好,我还是抽了一些时间来过一下插件瘾的.今天的主题是导航菜单 ...

  9. Web标准：七、横向导航菜单

    Web标准:七.横向导航菜单 知识点: 1.横向列表菜单 2.用图片美化的横向导航 3.css Sprites   1)横向列表菜单 可以在第四节课的基础上来实现横向导航菜单,只要给li一个float ...

随机推荐

  1. LOJ565. 「LibreOJ Round #10」mathematican 的二进制（NTT）

    题目链接 https://loj.ac/problem/565 题解 首先,若进行所有操作之后成功执行的操作数为 \(m\),最终得到的数为 \(w\),那么发生改变的二进制位的数量之和(即代价之和) ...

  2. POJ - 3585 树上最大流 换根法

    题意:给出一棵树,边上有容量限制,求以任一点作为根和源点,叶子作为汇点的最大流的最大值 首先上网络流等于找死 树形DP可以\(O(n)\)求出以某点\(u\)为根的最大流,只需设\(f[u]=\sum ...

  3. vue中npm run dev 不能自动打开浏览器运行项目

    最近用vue2.0 + webpack搭建了环境创建新的项目.出现一个很蹩脚的问题: 在终端输入 npm run dev 的时候,不能自动打开浏览器运行项目. 这段话的意思是:你的应用程序运行地址是: ...

  4. yum的repo文件详解、以及epel简介、yum源的更换

    一.什么是repo文件        repo文件是Fedora中yum源(软件仓库)的配置文件,通常一个repo文件定义了一个或者多个软件仓库的细节内容,例如我们将从哪里下载需要安装或者升级的软件包 ...

  5. win7 64位英文版　ado驱动

    https://www.microsoft.com/zh-tw/download/details.aspx?id=5793

  6. NestJS 用TypeScript开发 nodeJS后端

    NestJS A progressive Node.js framework for building efficient and scalable server-side applications ...

  7. HBase数据快速导入之ImportTsv&Bulkload

    导入数据最快的方式,可以略过WAL直接生产底层HFile文件 (环境:centos6.5.Hadoop2.6.0.HBase0.98.9) 1.SHELL方式 1.1 ImportTsv直接导入 命令 ...

  8. 【随笔】 Win7下安装Git

    Git GGit是一个开源的分布式版本控制系统,用以有效.高速的处理从很小到非常大的项目版本管理.[2] Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源 ...

  9. C 标准库 - string.h之strspn使用

    strspn Returns the length of the initial portion of str1 which consists only of characters that are ...

  10. poj 1168 The Triangle

    The Triangle Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 39169   Accepted: 23518 De ...