CSS+JS下拉菜单和纯CSS下拉菜单
下拉菜单
（思路：先把二级定位到屏幕外，鼠标悬停重新定位回来；另一个就是ul浮动，li也浮动）
下拉菜单的一般思路就是把子导航嵌套在无序列表中，把列表定位到屏幕之外，当鼠标悬停在其父列表项上时，重新定位它。
有两个问题需要注意，
第一个问题，列表项设置了float浮动，因此列表也要浮动已防止列表收缩：
ul.nav,ul.nav ul{float:left}
ul.nav li{float:left}
第二个问题，子导航的定位
ul.nav li ul{position:absolute;left:-999em}
ul.nav li:hover ul{left:auto}
一、CSS+JS下拉菜单
原理：一级菜单的li中包含二级菜单ul。在鼠标没有移上去时，二级菜单的ul是display：none的状态，鼠标一移上去变成display：block。改变这个display属性值是通过JS来实现。鼠标hover时，把整个二级菜单的ul给display出来，用到的事件onmouseonver。鼠标移出又把整个二级菜单的ul 给隐藏掉。
nav-js.html文件
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<link href="nav-js.css" rel="stylesheet">
<script type="text/javascript">
//显示子菜单
function showSubMenu(li){
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "block";
} //隐藏子菜单
function hideSubMenu(li){
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "none";
}
</script>
</head>
<body>
<ul id="navigation">
<li><a href="#">首页</a></li>
<li onmouseover="showSubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">我们的服务</a>
<ul>
<li><a href="#">服务一</a></li>
<li><a href="#">服务二</a></li>
<li><a href="#">服务三</a></li>
<li><a href="#">服务四</a></li>
<li><a href="#">服务五</a></li>
</ul>
</li>
<li onmouseover="showSubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">我们的团队</a>
<ul>
<li><a href="#">服务一</a></li>
<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>
<li><a href="#">关于我们</a></li>
</ul>
</body>
</html>
nav-css.css文件
@charset "UTF-8";
*{
margin:;
padding:;
} body{
font-size: 14px;
font-family: sans-serif;
}
#navigation,#navigation li ul{
list-style-type: none;
}
#navigation li{
float: left;
text-align: center;
position: relative;
}
#navigation li a:link,#navigation li a:visited{
display: block;
text-decoration: none;
color: #000;
width: 120px;
height: 40px;
line-height: 40px;
border: 1px solid #fff;
background: #c5dbf2;
border-width: 1px 1px 0 0;
}
#navigation li a:hover{
color: #fff;
background: #2687eb;
}
#navigation li ul li{
float: none;
}
#navigation li ul{
display: none;
position: absolute; /*二级ul使用绝对定位，宽度大于一级菜单时，才不会撑大一级*/
}
#navigation li ul li a:link,#navigation li ul li a:visited{
display: block;
width: 160px;
}
在46行，如果一级li的宽度小于二级li的宽度，那么就会撑大一级li的宽度，如图：
显示和隐藏二级UL的JS函数：
//显示子菜单
function showSubMenu(li){
var subMenu = li.getElementsByTagName("ul")[0]; /*传了一个参数li进来，表示当前鼠标经过的li，
再通过查找当前li下面的第一个ul，注意数组从0开始*/
subMenu.style.display = "block";
} //隐藏子菜单
function hideSubMenu(li){
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "none";
}
做到了兼容所有的主流浏览器。
二、纯CSS实现的下拉菜单
纯CSS写的下拉菜单，其他浏览器都可以兼容，唯独IE6这家伙不怎么听话不兼容，所以当时IE6时，采用table布局，来达到IE6兼容的目的。
HTML文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>纯css下拉菜单，兼容IE6</title>
<link rel="stylesheet" type="text/css" href="nav-css3.css">
<!--[if lte IE 6]>
<style tpye="text/css">
table{
border-collapse: collapse;
margin: 0;
padding: 0;
}
.menu ul li a.hide,.menu ul li a:visited.hide{
display: none;
}
.menu ul li a:hover{
color:#fff;
background: #b3ab79;
}
.menu ul li a:hover ul{
display: block;
position: absolute;
top: 32px;
left: 0;
width: 105px;
}
.menu ul li a:hover ul li a{
background: #faeec7;
color: #000;
width:160px;
}
.menu ul li a:hover ul li a:hover{
background: #dfc184;
color: #000;
}
</style>
<![endif]-->
</head>
<body>
<div class="menu">
<ul>
<li><a class="hide" href="#">我们的服务</a>
<!--[if lte IE 6]>
<a href="#">我们的服务
<table><tr><td>
<![endif]-->
<ul>
<li><a href="#">服务一</a></li>
<li><a href="#">服务一</a></li>
<li><a href="#">服务一</a></li>
<li><a href="#">服务一</a></li>
<li><a href="#">服务一</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="#">我们的服务</a>
<!--[if lte IE 6]>
<a href="#">我们的服务
<table><tr><td>
<![endif]-->
<ul>
<li><a href="#">服务一</a></li>
<li><a href="#">服务一</a></li>
<li><a href="#">服务一</a></li>
<li><a href="#">服务一</a></li>
<li><a href="#">服务一</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="#">我们的服务</a>
<!--[if lte IE 6]>
<a href="#">我们的服务
<table><tr><td>
<![endif]-->
<ul>
<li><a href="#">服务一</a></li>
<li><a href="#">服务一</a></li>
<li><a href="#">服务一</a></li>
<li><a href="#">服务一</a></li>
<li><a href="#">服务一</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
</div>
</body>
</html>
CSS文件
*{
margin:;
padding:;
}
.menu{
font-family: arial,sans-serif;
font-size: 14px;
width: 750px;
}
.menu ul{
padding:;
margin:;
list-style-type: none;
}
.menu ul li{
float: left;
position: relative;
}
.menu ul li a, .menu ul li a:visited{
display: block;
text-align: center;
text-decoration: none;
width: 104px;
height: 30px;
color: #000;
border: 1px solid #fff;
border-width: 1px 1px 0 0;
background: #c9c9a7;
line-height: 30px;
font-size: 11px;
}
/*隐藏二级菜单ul*/
.menu ul li ul{
display: none;
}/*隐藏结束*/
.menu ul li:hover a{ /*????????????尝试修改此处*/
color: #fff;
background: #b3ab79;
}
/*显示二级菜单*/
.menu ul li:hover ul{
display: block;
position: absolute;
top: 31px;
left: 0px;
width: 105px;
}/*结束*/
/*添加二级菜单鼠标移过的样式*/
.menu ul li:hover ul li a{
display: block;
background: #faeec7;
color: #000;
width: 160px;
}
.menu ul li:hover ul li a:hover{
background: #dfc184;
color: #000;
}
ok，这样IE6也达到兼容。
CSS+JS下拉菜单和纯CSS下拉菜单的更多相关文章
- CSS+JS实现兼容性很好的无限级下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DT ...
- 不要再纠结css/js/html有没有必要放在WEB-INF下了
原因 首先,css/js/html没有必要放在WEB-INF下. 最终这些会被原封不动的展现在客户端,所以访问安全根本就不会成为问题. jsp放在web-inf下,原因主要有两个 1. 远古时代的模式 ...
- 谈谈一些有趣的CSS题目（十四）-- 纯 CSS 方式实现 CSS 动画的暂停与播放！
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- CSS学习笔记（8）--纯CSS绘制三角形（各种角度）
纯CSS绘制三角形(各种角度) CSS三角形绘制方法,学会了这个,其它的也就简单. 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多 ...
- Django使用本地css/js文件
Django使用本地css/js文件 在manager.py同层级下创建static文件夹, 里面放上css , js, images等文件或者文件夹 我的文件夹层级 然后只需在settings.py ...
- HTML+CSS+JS基础知识
HTML+CSS+JS基础知识 目录 对HTML+CSS+JS的理解 基础知识 对HTML+CSS+JS的理解 基础知识 插入样式表的三种方式 外部样式表:<link rel="sty ...
- 突破css选择器的局限，实现一个css地址选择器?
首先看一个效果,注意地址栏的变化 然后思考一下,用css如何实现? css选择器的局限 选择器是css中的一大特色,用于选择需要添加样式的元素. 选择器的种类有很多,比如 元素选择器 p {color ...
- 谈谈一些有趣的CSS题目（十五）-- 谈谈 CSS 关键字 initial、inherit 和 unset
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 支持多种浏览器的纯css下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 转 mysql 中sql 语句查询今天、昨天、7天、近30天、本月、上一月 数据
转自 http://blog.csdn.net/ve_love/article/details/19685399
- source insight添加汇编文件.s
(1) 做ARM嵌入式开发时,有时得整汇编代码,但在SIS里建立PROJECT并ADD TREE的时候,根据默认设置并不会把该TREE里面所有汇编文件都包含进来,默认只加了.inc和.asm后缀的, ...
- linux中C的静态库和动态库分析
从开始学C语言写第一个"hello world"历程到现在,我依然困惑于到底这个程序完整的执行流程是什么样的.不过,现在我正在尝试一点一点的揭开它的面纱.现在,我尝试分析linux ...
- UIlabel - 富文本属性
1.NSKernAttributeName: @10 调整字句 kerning 字句调整 2.NSFontAttributeName : [UIFont systemFontOfSize:_fontS ...
- 修改PHP上传大小设置
目前文档文库上传大小是读取服务器的PHP环境的设置,你们的PHP环境上传限制是多少,这里显示的就是多少. 很多用户问我如何修改上传大小,自己可以百度一下方法,也可以根据以下步骤修改: 1.找到服务务器 ...
- 【Xamarin开发 Android 系列 1】环境部署搭建
原文:[Xamarin开发 Android 系列 1]环境部署搭建 开篇自然先扯一段,近几年移动互联网如果熊猫零食一样,蔓延迅速.楼主身为一个微软忠实的粉丝,无奈,老爹不给力.Silverlight开 ...
- 使用ListView时遇到的问题
这周练习ListView时遇到了一个问题,从数据库中查询出的数据绑定到LIstView上,长按某个item进行删除操作,每次点击item取得的id都不对,调了半天终于找到了原因,关键是自己对自定义的B ...
- 例说C#深拷贝与浅拷贝
一开始,先对C#深拷贝与浅拷贝知识做个简单的总结. 无论是浅拷贝与深拷贝,C#都将源对象中的所有字段复制到新的对象中.不过,对于值类型字段,引用类型字段以及字符串类型字段的处理,两种拷贝方式存在一定的 ...
- 【转】Android4.4 之Bluetooth整理
原文网址:http://www.cnblogs.com/shed/p/3737016.html Android 4.4上蓝牙协议栈采用的是BRCM和Google共同开发的bluedroid,代替了之前 ...
- Jquery UI dialog 详解 (中文)
转载▼ 1 属性 1.11 autoOpen ,这个属性为true的时候dialog被调用的时候自动打开dialog窗口.当属性为false的时候,一开始隐藏窗口,知道.dialog("op ...