<!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. 基础篇：3）规范化：3d制图总章

    本章目的:明确3d绘图也有相应的准则,遵守者方有相应的进阶之路. 1.建模目标:拥有自己的建模思想 学习完成3d制图,最直接的评价标准就是--拥有自己的建模思想. 其表现为: 1)建模思路明确,能独立 ...

  2. 高阶篇：4.1）QFD质量功能展开-总章

    本章目的:了解QFD概念和作用,为FMEA打下基础. 1.QFD定义 质量功能展开QFD(Quality Function Deployment),是把顾客或市场的要求转化为设计要求.零部件特性.工艺 ...

  3. 4KM

    ip addr add 10.9.8.100/24 broadcast + dev eth0 /etc/sysconfig/network-scripts/ifcfg-eth0 ifdown eth0 ...

  4. VS中的DataPager分页

    微软的DataPager分页功能很强大,不要设置数据库存储过程,只要添加个DataPager控件,关联下要分页的控件,简单设置就可以有不错的分页效果.当然要有更理想的效果还是要前台和后台处理下. wi ...

  5. Which mb sdconnect c4 worth the money?

    MB SD connect C4 with laptop v2018.5 Version avaiable now ,It is ready to work after you get it ,wor ...

  6. Comparison of Symbolic Deep Learning Frameworks

    http://blog.revolutionanalytics.com/2016/08/deep-learning-part-1.html Deep Learning Part 1: Comparis ...

  7. CMS: DNN And Umbraco

    在比较了众多CMS系统后,还是把焦点定在DNN和Umbraco两个系统上,这两个系统都可以使用UserControl扩展自己需要的功能. DNN的架构比较复杂,Module.Skin.Containe ...

  8. maven多层项目配置

    今天遇到一个maven项目有3个子项目的配置问题,一开始项目结构是混乱的,而且包引入不能正常解析. 主项目上右键,选择configure->configure and detect nested ...

  9. 修改Tomcat使用的JVM内存大小

    我的服务器的配置: # OS specific support.  $var _must_ be set to either true or false. JAVA_OPTS="-Xms10 ...

  10. 九度oj 1464 Hello World for U 2012年浙江大学计算机及软件工程研究生机试真题

    题目1464:Hello World for U 时间限制:1 秒 内存限制:128 兆 特殊判题:否 提交:3872 解决:1082 题目描述: Given any string of N (> ...