三状态玻玻璃效果菜单

效果图：

代码中用到的图片

代码如下：
   
 #menu ul {
   font-family:arial;
   font-size:14px;
     padding:0 0 0 8px;
   margin:0 auto;
         list-style:none;
         height:35px;
         white-space:nowrap;　　/*它的含义就是一个菜单不允许从空白字符处折行*/
         }
   
    #menu ul li {
   float:left;
   margin:0 2px;
   }
/*设置普通状态的菜单项start*/
    #menu ul li a{
   display:block;
   float:left;
     line-height:35px;
   color:#666;
   text-decoration:none;
   padding:0 0 0 14px;
   background:url(background.gif);
   }
   
  #menu ul li a b{
   display:block;
   padding:0 14px 0 0;
     background:url(background.gif) no-repeat right top;
      }
/*设置普通状态的菜单项end*/
/*设置鼠标悬停时菜单项start*/
 #menu ul li a:hover{
   color:#fff;
      background: url(background.gif) left center;
   }
   
   #menu ul li a:hover b{
   color:#fff;
      background: url(background.gif) no-repeat right center;
      }
/*设置鼠标悬停时菜单项end */
 /*设置表示当前页的菜单项start*/
 #menu ul li.current a{
   color:#fff;
      background: url(background.gif) no-repeat left bottom;
   }
 #menu ul li.current a b{
      background: url(background.gif) no-repeat right bottom;
   }
 #menu ul li.current a:hover{
      background: url(background.gif) no-repeat left bottom;
      cursor:default;
   }
 #menu ul li.current a:hover b{
      background: url(background.gif) no-repeat right bottom;
      cursor:default;
      }
 /*设置表示当前页的菜单项end*/
   

玻璃效果菜单(2)
   

    home  
       contact us
       web dev
       web design
       map

   
----------------------------------------------
此篇文章从博客转发
原文地址： Http://blog.gkong.com/more.asp?id=86154&Name=gufeiyan