<!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. 搭建gogs

    https://blog.csdn.net/hwm_life/article/details/82969005 服务器环境 CentOS 7 64位 安装Gogs所需的其它环境 需要安装的依赖有Ngi ...

  2. 判断H5页面环境是否在小程序的webview中

    用小程序提供的wx.miniProgram.getEnv可以获取环境参数,但是它有个问题就是无法在非微信环境下判断.所以在使用wx.miniProgram.getEnv前得先判断是否在微信环境中. 解 ...

  3. Centos 7.6 安装selenium+firefox+google chrome（支持xshell运行）

    1. 查看Linux 版本 [root@penguin selenium]# cat /etc/redhat-release CentOS Linux release 7.6.1810 (Core) ...

  4. CAS总结

    n++的问题不能保证原子操作. 因为被编译后拆分成了3个指令,先获取值,然后加一,然后写回内存.把变量声明为volatile,volatile只能保证内存可见性,但是不能保证原子性,在多线程并发下,无 ...

  5. 删除centos 7 系统自带的 openjdk

    1.  查看是否系统自带openjdk. java -version 2. 查看jdk位置 rpm -qa | grep java 3. 删除jdk rpm -e --nodeps java--ope ...

  6. vue,新手上路，基础，常见问题

    1. 报这个错的  都是关键字问题,不要用关键字 做为组件的名字,不然肯定都会报错,如果找不到就一个字母的看,我就是 忘记改组件的名字导致报错,这个问题   改个名字就好,切记改全不然只有页面报错,文 ...

  7. 转 OGG 部署阶段常见问题

    序号 问题 解决方案1 "2019-04-13 20:23:55 ERROR OGG-00868 Oracle GoldenGate Capture for Oracle, e_db1.pr ...

  8. revit 学习园地

    https://www.cnblogs.com/greatverve/category/286724.html

  9. 仿jQuery的toggle方法

    两次点击事件进行切换 var toggle = (function () { var a = true; return function (fn1, fn2) { a = !a; var toggle ...

  10. dubbo序列化hibernate.LazyInitializationException could not initialize proxy - no Session懒加载异常的解决

    dubbo序列化,hibernate.LazyInitializationException could not initialize proxy - no Session懒加载异常的解决 转载声明: ...