效果
![](https://img-my.csdn.net/uploads/201211/29/1354177281_4897.png)
code
<!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>玻璃特效的导航菜单</title>
<style type="text/css">
body{
margin:0;
margin-top:20px;
}
ul#menu{
font-family:Arial, Helvetica, sans-serif;
font-size:17px;
background-image:url(images/under.gif);
padding:0 0 0 8px;
list-style:none;
height:35px;
}
#menu li{
float:left;
}
a{
display:block;
line-height:35px;
color:#ddd;
text-decoration:none;
padding:0 0 0 10px;
}
a:hover{
color:#fff;
background-image:url(images/hover.gif);
}
a:hover strong{
color:#fff;
background:url(images/hover.gif) no-repeat right top ;
}
strong{
display:block;
padding:0 10px 0 0;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#1"><strong>主页</strong></a></li>
<li><a href="#1"><strong>科技频道</strong></a></li>
<li><a href="#1"><strong>时尚频道</strong></a></li>
<li><a href="#1"><strong>教育频道</strong></a></li>
</ul>
</body>
</html>
分析
我觉得最重要的还是,a:hover{....}和a:hover strong{....}刚刚看,可能有怀疑,为什么要用两个background-image?我们来试试删掉a:hover{....}试试.
效果:
![](https://img-my.csdn.net/uploads/201211/29/1354178045_9301.png)
我们再来只删掉a:hover strong{....}试试.
![](https://img-my.csdn.net/uploads/201211/29/1354178161_6414.png)
我们可以很明显的发现只有一个标签的话,一侧的切口太明显,这是图片本身导致的,我们可以使用滑动门的技术来解决.也就是两个标签的图片相互叠加,这样就会把切口叠加掉.