<!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. JAVA中 package 和 import 的使用

    1.打包--package 包名一般为小写,而类名的第一个字母一般为大写,这样在引用时,可以明显的分辨出包名和类名.如果在类的定义之前没有使用package定义包名,那么该类就属于缺 省的包. 1.1 ...

  2. AWS S3

    Amazon Simple Storage Service (Amazon S3) Amazon S3 提供了一个简单 Web 服务接口,可用于随时在 Web 上的任何位置存储和检索任何数量的数据.此 ...

  3. Excel2007使用SQL语句

    Excel2007使用SQL语句 假如金三导出表格如下:[入库查询dddd.xls] 第1步 第2步 第3步 找到[入库查询dddd.xls] 比如 SELECT 纳税人名称, sum(实缴金额) F ...

  4. js面向对象（二）——继承

    上一篇随笔讲了封装,这一篇我们说说继承,还是那上一篇猫和狗说事儿 function Dog(name,s){ this.name=name; this.sex=s; } Dog.prototype.t ...

  5. (转)bash条件判断之if语句

    http://blog.51cto.com/64314491/1629175---------bash条件判断之if语句(一) http://blog.51cto.com/64314491/16292 ...

  6. sql 查询目标数据库中所有的表以其关键信息

    1.查询目标库中的所有表 SELECT obj.name tablename, ---表名 schem.name schemname, ---表所属的方案 idx.rows, ---一共有几行数组 C ...

  7. C# 反射(Reflection)技术

    本文参考自C#反射(Reflection)详解,纯属学习笔记,加深记忆 在介绍反射前,先介绍一个重要的知识点         .Net应用程序是由程序集(Assembly).模块(Module).类型 ...

  8. Web测试注意事项

    参考文章:http://www.51testing.com/html/07/n-3723307.html 总结下遇到的web测试的时候需要注意的地方: 页面分辨率:  通常是计算机的默认分辨率,但是还 ...

  9. lucene关于IndexReader总结

    IndexReader.使用过程中有时会出现document被删除,reader还是原来的reader没有改变,所以使用openifchanged保证, 又因为IndexReader 初始化很耗费资源 ...

  10. C 标准库 - string.h

    C 标准库 - string.h This header file defines several functions to manipulate C strings and arrays. stri ...