使用CSS双层滑动门技术实现三态玻璃效果水平导航菜单 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用双层滑动门实现三态玻璃效果菜单</title>
<style type="text/css">
.menu ul {
    font-family:Arial;
    font-size:14px;
    padding:0 0 0 8px;
    margin:0 auto;
    list-style:none;
    height:35px;
    white-space:nowrap; //防止IE下单个菜单项中间折行
}
.menu ul li {
    float:left;
    margin:0 2px;
}
.menu ul li a {
    display:block;
    float:left;
    line-height:35px;
    color:#666666;
    text-decoration:none;
    padding:0 0 0 14px;
    background:url(three-state-navi-background.gif);
}
.menu ul li a b {
    display:block;
    padding:0 14px 0 0;
    background:url(three-state-navi-background.gif) no-repeat right top;
}
.menu ul li a:hover {
    color:#FFFFFF;
    background:url(three-state-navi-background.gif) no-repeat left center;
}
.menu ul li a:hover b {
    background:url(three-state-navi-background.gif) no-repeat right center;
}
.menu ul li.current a { //对当前页面链接所在菜单项进行特殊设置
    color:#FFFFFF;
    background:url(three-state-navi-background.gif) no-repeat left bottom;
}
.menu ul li.current a b {
    background:url(three-state-navi-background.gif) no-repeat right bottom;
}
.menu ul li.current a:hover {
    background:url(three-state-navi-background.gif) no-repeat left bottom;
    cursor:default;
}
.menu ul li.current a:hover b {
    background:url(three-state-navi-background.gif) no-repeat right bottom;
}
</style>
</head>
<body>
<div class="menu">
<ul>
    <li><a href="#"><b>Home</b></a></li>
    <li><a href="#"><b>Connect</b></a></li>
    <li><a href="#"><b>Web Dev</b></a></li>
    <li><a href="#"><b>Web Design</b></a></li>
    <li class="current"><a href="#"><b>Map</b></a></li>
</ul>
</div>
</body>
</html>

素材下载：https://files.cnblogs.com/likebeta/201205292523211.zip

posted @ 2012-05-29 08:41  likebeta  阅读(856)  评论(0)  编辑  收藏  举报