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

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

<!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>

北京百度网讯科技有限公司

什么补钙?别担心，我们提供专业医疗服务，助您找回健康生活

2025-02-21 01:11广告

立即查看

mark

ie6 不兼容额

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

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

补希望能看到兼容的

马克之

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

mark

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

厉害，请问手机端怎么弄

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>
请问是这样加吗，我这加了还是不行。

感谢分享

扫二维码下载贴吧客户端

下载贴吧APP
看高清直播、视频！

18回复贴，共1页

<<返回css吧

分享到:

日	一	二	三	四	五	六