CSS图片翻转菜单

如果用传统方法制作翻转菜单，至少需要把图片切成10块，用S码挂起来，行为加到图片按钮上。现在完全用CSS实现，只需要一张图片，如下图所示。

代码CSS : # img menu { width : 450 px；高度： 25px；/*高度是背景图片的一半*/background:url(./images/nav BG . gif)；列表样式类型：无；padding: 0pxmargin: 0px} #imgmenu li{左侧浮动：} #imgmenu阿利{ display: block宽度： 90px；高度： 25px；} #imgmenu li#home a:hover，#activeh{ background: url(./images/nav BG . gif)0-25px；/*翻转时背景图像的位置，0px在左侧，-25px在背景图像的顶部和下部，下同*/} # imgmenuli #关于a:haver，# activea {background3360url(./images/nav BG . gif)-90px-25px；/*第二个菜单的位置是左侧90px，每个菜单的宽度是90px */} # imgmenuli # pro a : haver，# activep {background3360url(./images/nav BG . gif)-180 px-25px；} #imgmenu li#faq a:hover，#activef{ background: url(./images/nav BG . gif)-270 px-25px；} # imgmenu li #联系人a:hover，#activec{ background: url(./images/nav BG . gif)-360 px-25px；}在设计上更体贴，照顾好友纯文本浏览：可以在LI中插入SPAN元素，添加文本链接，样式上设置SPAN不可见。