CSS实现导航条图片的翻转菜单

来源：互联网发布：java eclipse 64位编辑：程序博客网时间：2024/06/02 11:57

如果用传统的方法制作这个翻转菜单，至少需要把图片切成10块，还要加上JS代码，在图片按钮上再加行为，现在完全用CSS来实现，图片只要一张，见下图：

CSS代码:

     #imgmenu{ 　　width: 450px; 　　height: 25px; /*高度是背景图片的一半*/ 　　list-style-type: none; 　　padding: 0px; 　　margin: 0px; 　　} 　　#imgmenu li{ 　　float: left; 　　} 　　#imgmenu li a{ 　　display: block; 　　width: 90px; 　　height: 25px; 　　} 　　#imgmenu li#home a{ 　　background: url(menu.gif) 0 0; 　　/*背景图的位置，左边0px，顶部0px, 　　背景图的下半部分，下同*/ 　　} 　　#imgmenu li#about a{ 　　background: url(menu.gif) -90px 0; 　　/*第二个菜单的位置距左边90px， 　　每个菜单的宽度是90px*/ 　　} 　　#imgmenu li#pro a{ 　　background: url(menu.gif) -180px 0; 　　} 　　#imgmenu li#faq a{ 　　background: url(menu.gif) -270px 0; 　　} 　　#imgmenu li#contact a{ 　　background: url(menu.gif) -360px 0; 　　}　　#imgmenu li#home a:hover{ 　　background: url(menu.gif) 0 -25px; 　　/*翻转时背景图的位置，左边0px，顶部-25px, 　　背景图的下半部分，下同*/ 　　} 　　#imgmenu li#about a:hover{ 　　background: url(menu.gif) -90px -25px; 　　/*第二个菜单的位置距左边90px， 　　每个菜单的宽度是90px*/ 　　} 　　#imgmenu li#pro a:hover{ 　　background: url(menu.gif) -180px -25px; 　　} 　　#imgmenu li#faq a:hover{ 　　background: url(menu.gif) -270px -25px; 　　} 　　#imgmenu li#contact a:hover{ 　　background: url(menu.gif) -360px -25px; 　　}
<ul id="imgmenu"> 
<li id="home"><a href="#"></a></li> 
<li id="about"><a href="#"></a></li> 
<li id="pro"><a href="#"></a></li>
<li id="faq"><a href="#"></a></li> 
<li id="contact"><a href="#"></a></li>
</ul>