利用:hover伪类制作二级导航菜单 - css吧

level 13

圣龍骑士楼主

今天给大家介绍个怎么利用:hover伪类制作二级导航菜单。
:hover伪类就是鼠标悬停在元素上面时候向该元素添加的样式。大家平时一定使用过这样的代码：a:hover{color:#f0f0f0;}这是鼠标悬停于a标签元素上面是为该链接文字改变颜色。我们可以利用:hover伪类和选择器改变其它元素的显示隐藏值，于是就可以制作二级菜单。
代码在二楼，另外，由于IE6不支持>选择器，所以不兼容IE6；
又：我以后写的代码都是用chrome浏览器做的测试，所以大家尽量使用chrome浏览器测试代码。
讲解下一级和二级菜单的position设置。下面的代码将二级菜单ol设置position为absolute。大家知道，设置这个属性值的元素的布局会脱离文档流，它的偏移量不影响其它元素，也不受常规流的元素影响，所以它会出现在视窗的左上角。但是如果设置它的父元素的position为relative，则该元素会相对于父元素定位。设置它的top和left值是按它父元素的上边距和左边距来计算的。下面设置的top:100%;就是让二级菜单的上边距距离父元素的上边距100%高度，刚好它的顶部在一级菜单的底部处。
下面没有更改鼠标悬停于链接上面时背景色，你可以自行利用:hover进行设置，做出更加漂亮的菜单。

2013年04月11日 11点04分 1

level 13

圣龍骑士楼主

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
/*重置所有元素的三个样式为零，一般不推荐这样使用，但是我测试一般这么写*/
* {margin:0; padding:0; border:0;}
a {text-decoration:none; color:#000;}
body {font-size:12px; font-family:"微软雅黑";}
ul,ol {list-style:none;}
ul > li { /* 选择一级菜单的li元素 */
float:left; /*让li元素排成一排*/
display:block;
width:80px; height:40px; /*设置它们的宽度和高度*/
margin-left:10px; /*设置它们左边的空隙*/
position:relative; /*设置为相对定位，这很重要*/
text-align:center; /*这两行是让里面的文字水平垂直居中对齐*/
line-height:40px;
background:-webkit-linear-gradient(top,#66ee66,#33ee33); /* 下面三行是设置背景色，没有做ff和opera的兼容 */
filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr="#ff66ee66",endcolorstr="#ff33ee33");
background:-ms-linear-gradient(top,#66ee66,#33ee33)
}
ol { /* 选择二级菜单 */
position:absolute; /* 设置为绝对定位，这很重要 */
top:100%; /* 设置二级菜单的顶边位于一级菜单的底部*/
display:none; /* 设置二级菜单为不可见 */
}
ol > li {/* 选择二级菜单li元素 */
width:80px;
height:30px;
text-align:center;
line-height:30px;
margin-top:5px; /* 设置二级菜单单元的顶部间隙 */
background:-webkit-linear-gradient(top,#6699ff,#3366ff);
filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr="#ff6699ff",endcolorstr="#ff3366ff");
background:-ms-linear-gradient(top,#6699ff,#6699ff)
}
ul > li:hover > ol {display:block;} /* 设置鼠标悬停于一级菜单时，二级菜单显示 */
</style>
</head>
<body>
<ul>
<li><a href="#">CSS</a>
<ol>
<li><a href="#">选择器</a></li>
<li><a href="#">伪类</a></li>
<li><a href="#">动画</a></li>
<li><a href="#">布局</a></li>
</ol>
</li>
<li><a href="#">HTML</a>
<ol>
<li><a href="#">多媒体</a></li>
<li><a href="#">表单</a></li>
<li><a href="#">文档类型</a></li>
<li><a href="#">DOM</a></li>
</ol>
</li>
<li><a href="#">XML</a>
<ol>
<li><a href="#">DOM</a></li>
<li><a href="#">解析</a></li>
<li><a href="#">样式</a></li>
<li><a href="#">Ajax</a></li>
</ol>
</li>
<li><a href="#">javascript</a>
<ol>
<li><a href="#">操作DOM</a></li>
<li><a href="#">Ajax</a></li>
<li><a href="#">原型继承</a></li>
<li><a href="#">闭包</a></li>
</ol>
</li>
</ul>
</body>
</html>

2013年04月11日 11点04分 2

圣龍骑士

上面的例子有bug，在IE8、IE9下会出现移动不到子菜单的情况，给a标签加上disply:block; width:100%; height:100%; 就可以。因为最近我装了IE10尝新，所以测试都是用的最新的浏览器，谅解~ [汗]

2013年04月12日 04点04分

level 6

似存蓉h

mark

2013年04月11日 12点04分 3

level 10

癡情de尐男孩

ie6 不兼容额

2013年04月11日 15点04分 4

level 1

お詠℃遠╭の

IE 8 9用户移动到子菜单很困难。。。。。你让win7用户情何以堪，除了我们装chrome比较多，大部分用户还是以ie为主。

2013年04月12日 04点04分 5

圣龍骑士

a标签加上disply:block; width:100%; height:100%;

2013年04月12日 04点04分

level 13

圣龍骑士楼主

上面的例子有bug，在IE8、IE9下会出现移动不到子菜单的情况，给a标签加上disply:block; width:100%; height:100%; 就可以。因为最近我装了IE10尝新，所以测试都是用的最新的浏览器，谅解~ [汗]

2013年04月12日 04点04分 6

level 12

淹没的海平线_

补希望能看到兼容的

2013年04月15日 11点04分 7

level 12

得闲饮茶iii

马克之

2013年07月02日 09点07分 8

level 1

风雅又灿烂丶0c

呵呵这是JAVASCRIPT的活CSS硬是要凑热闹

2013年07月19日 15点07分 9

圣龍骑士

这本来是css的事，因为ie6变成了js的事 = =

2013年07月20日 01点07分

东方财讯😁

用CSS更简单

2015年05月21日 08点05分

level 7

boyit0

2013年07月20日 01点07分 10

level 1

cake3362015

mark

2014年06月07日 10点06分 11

level 8

Winke_

get~~~~~~~~~~~~~~~~~~~~~~~~

2014年06月08日 14点06分 12

level 1

福辉孵化机技术

厉害，请问手机端怎么弄

2018年02月22日 09点02分 14

level 1

福辉孵化机技术

IE 8.0试了试，
<li><a disply:block; width:100%; height:100% href="#">首页</a>
<ol>
<li><a disply:block; width:100%; height:100% href="#">选择器</a></li>
<li><a disply:block; width:100%; height:100% href="#">伪类</a></li>
<li><a disply:block; width:100%; height:100% href="#">动画</a></li>
<li><a disply:block; width:100%; height:100% href="#">布局</a></li>
</ol>
</li>
请问是这样加吗，我这加了还是不行。

2018年02月22日 10点02分 15

level 3

哈利路亚啊啊😜

感谢分享

2018年02月23日 04点02分 16