纯CSS下拉菜单分析 - ┣◇网站建设&Web语言 - ╋艺镇╋

我很少用到下拉菜单这个东西,所以以前看到什么纯CSS下拉菜单的帖子或者文章都没有详细看过.今天碰巧又看到了这样的文章,反正也闲着也闲着,就稍微研究了一下,自己也学着做了一个DEMO.

为什么纯CSS下拉菜单这么受欢迎呢,因为下拉菜单是个好东西,可以使网站导航更加清晰.而在导航种使用JavaScript又有一些弊端.纯CSS下来菜单主要利用了:hover,

Selector : hover { sRules }

这个slector在CSS2中支持任何对象,而在CSS1中仅支持a对象.所以符合标准的纯CSS下拉菜单在IE6.0中还不能使用,要是你仍然在使用IE6.0的话,不妨试试对标准支持良好的Firefox ? 2.0.

一级下拉菜单原理:有了:hover设置鼠标悬停时的属性,那制作下拉菜单就方便了.设想定义一个宽150像数,高20像素名叫menubox的块,在这个块里放入下拉菜单的列表,列表的每一项也是宽150像数高20像素,设置menubox把超出部分隐藏.这时候可以看到的就是菜单里的第一项.当鼠标悬停在menubox上的时候,使用:hover把menubox的高设置为等于菜单的高度,那么菜单的所有项目就显示出来了.

HTML

CSS

.menubox {
    width:150px;
    height:20px;
    overflow:hidden;
}

.menubox:hover {
height:auto;
}

.menubox a {
    display:block;
    width:150px;
    height:20px;
}

二级下拉菜单原理:二级下拉菜单采用列表嵌套,先把二级菜单使用display:none;隐藏,当鼠标悬停在需要显示二级菜单的条目时,设置display:block;显示该列表.

HTML

......
<li><a href="#">Item 1 2 >></a>
<ul>
<li><a href="#">Item 1 2 1</a></li>
<li><a href="#">Item 1 2 2</a></li>
</ul>
</li>
......

CSS

.menubox ul li ul {
display:none;
}

.menubox ul li:hover ul {
display:block;
}

全部代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS菜单</title>
<style>
body {
    text-align:center;
}
#positioner{
    clear:both;
    margin:0 auto;
    position:relative;
}

.menubox {
    float:left;
    width:149px;
    height:20px;
    margin:0 1px 0 0;
    padding:0;
    overflow:hidden;
}

.menubox:hover {
height:auto;
}

.menubox ul {
margin:0;
padding:0;
}

.menubox ul li {
list-style:none;
background:#cff;
}

.menubox ul li ul {
display:none;
}

.menubox ul li:hover ul {
    display:block;
    position:absolute;
    margin-top:-20px;
    left:149px;
}

.menubox a {
    display:block;
    padding:2px 0 0 0;
    width:149px;
    height:17px;
    border-bottom:1px solid #fff;
    font-family:Verdana;
    font-size:12px;
    text-decoration:none;
    color:#000;
}

.menubox a:hover {
background:#ffc;
color:#F00;
}

.menubox ul li.showitem a {
background:#ccc;
}

#item2 li {
background:#fcf;
}

</style>
</head>

至于IE,因为只支持a:hover,只能在链接里面嵌入表格代替(<a href="#">Tex<table><tr><td><a href="#">Text</a></td></tr></table></a>),但这是标准不支持的做法,所以在真正使用CSS下拉菜单的时候需要两种方法同时使用,已确保页面的兼容性.要是你嫌这样做很麻烦的话,你也可以使用一款叫Visual Infinite Menus的软件自动生成CSS下拉菜单.

主题：纯CSS下拉菜单分析