用CSS制作隐藏菜单

2009-12-16 02:44| 发布者: admin| 查看: 42| 评论: 0|原作者: 小寳寳

　　简洁的隐藏垂直菜单在hover时将内容展开。这样的效果在JS里有很多个版本，但这个可以说是绝无仅有的CSS版本。此菜单可以在IE5.5,IE6,IE7,FF,Opera,NS8以及MacFF1.5和Safari里正常显示，虽然Mac IE5.X里可能会有些问题。
CSS 代码
以下是引用片段：
/* 共用样式 */
.menu {
font-family: verdana, sans-serif;
position:relative;
font-family: tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif;
margin-bottom:220px;
}
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
.menu ul li {
position:relative;
float:left;
}

.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
width:25px;
height:100px;
font-weight:bold;
background:transparent url(../../updata/tab.gif) top right no-repeat;
text-indent:-999px;
}

.menu ul li ul {
visibility:hidden;
position:absolute;
width:190px;
top:0;
left:0;
border:1px solid #444;
}

table {
margin:0; padding:0; border:0;
border-collapse:collapse;
font-size:1em;
}

/* 非IE浏览器专用 */
.menu ul li:hover a {
color:#fff;
width:215px;
}

.menu ul li:hover ul {
visibility:visible;
}

.menu ul li:hover ul li a {
display:block;
background:#eee;
border:0;
margin:0;
text-indent:0;
color:#333;
font-weight:normal;
font-size:0.9em;
height:auto;
line-height:1em;
padding:5px;
width:180px;
text-align:left;
}

.menu ul li:hover ul li a:hover {
background:#888;
color:#fff;
}

如果是要支持IE6则要加上:
.menu ul li a:hover {
width:215px;
}
.menu ul li a:hover ul {
visibility:visible;
}
.menu ul li a:hover ul li a {
display:block;
background:#eee;
border:0;
margin:0;
text-indent:0;
color:#333;
font-weight:normal;
font-size:0.9em;
height:auto;
line-height:1em;
padding:5px;
width:190px;
w\idth:180px;
text-align:left;
}
.menu ul li a:hover ul li a:hover {
background:#888;
color:#fff;
}
生效的XHTML代码
以下是引用片段：

收藏分享邀请

		自动登录	找回密码
密码			注册

用CSS制作隐藏菜单

最新评论

相关分类