本例主要实现一个玻璃材质效果的水平菜单。完成的效果图如图所示：
本例中使用了两个图像，如图
这是作为菜单的背景使用得。
相应的HTML代码如下：
<ul class="item">
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Contact Us</span></a></li>
<li><a href="#"><span>Web Dev</span></a></li>
<li><a href="#"><span>Web Design</span></a></li>
<li><a href="#"><span>Map</span></a></li>
</ul>
下面设置菜单的整体效果。
1， 设置文字的字体和字号，代码如下：
.item{
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
background:#ccc;
}
设置li的样式，代码如下：
.item li{
float:left;
background:url(bg.gif) repeat-x center;
padding:5px;
margin:0 auto;
list-style-type:none;
}
将a元素设置为块及元素，代码如下：
.item li a,item a:visited{
text-decoration:none;
color:#fff;
text-align:center;
display:block;
padding-top:5px;
}
现在在浏览器内效果如图：
使用“滑动门”技术设置玻璃材质背景
首先设置a元素鼠标经过效果，代码如下：
.item li a:hover{
display:block;
float:left;
background:url(bt-bg.gif) center;
overflow:hidden;
color:#000;
margin:0 auto;
}
对标记b的属性进行设置，代码如下
.item a b{
display:block;
}
鼠标经过b的样式，代码如下：
.item a:hover b{
padding:0px 20px 0px 0px;
color:#FFF;
background:url(img/bt-bj.gif) no-repeat right top;
}
这样可以得到，效果图
