CSS如何制作一张图片多种状态的图象翻转菜单？

　　根据页面设计的需要，有时候我们使用图象翻转菜单，所谓图象翻转菜单是指在链接状态、鼠标激活状态实现不同的图片效果。
　　在通常的图象翻转菜单制作中，会出现闪烁的情况，这是因为图片载入延时所造成的，也就是图象还未完全加载没能完全显示，加载时间的间隔就会出现闪烁的现象。
　　我们今天所要讨论的是将图象翻转菜单的多种状态制作成一张图片，我们应用css对背景图片的位置进行控制，进而实现一张图片多种状态的图象翻转菜单效果。

　　我们先看看下面的这张图片。

　　这张图片从上至下结合了三个不同的状态，链接样式，激活样式，当前页样式。
　　来看下面的css代码：


　　我们来看下面的xhtml代码：


　　#nav li声明了图象按钮区域的宽高，去掉了列表标记，并且设置右边距两个象素，溢出部分直接隐藏。

　　#nav li a同样声明了宽与高，溢出部分直接隐藏。设置了内边距，距离顶部50px，这一设置有什么作用呢？我们需要考虑一种情况的发生，如果用户在浏览网页的时间，由于网速等原因没有能加载css文件，那用户根本没有办法点击链接，因为链接的定义全部写在css文件中，我们除了应用图片区域块的无序列表的链接，还应该加上文字链接，这样就不必担心没有CSS文件无法访问。同时也有利于SEO，让搜索引擎更容易的抓取网站上的内容。文字链接是不能与图片区域重合的，这样就会发生重叠影响美观，我们设置距离顶部50px，文字已经位于图象区域以外，并且设置了溢出部分直接隐藏。在正常情况下是看不到文字链接的。在下面的运行效果中，你可以去掉CSS样式定义看看实际效果。

　　#nav li a.an　声明了名称为an的类的背景图片，不重复，位置是距顶距左均为0.
　　#nav li a:hover　声明了激活时背景图片的位置，距顶部-43px；也就实现了图片中间位置那一按钮的效果。
　　#nav li a.dang 声明了当前页图片的位置，距顶部-86px；也就实现了图片最下面位置那一按钮的效果。这三个CSS代码中，最重要的就是background-position属性，关于background-position的说明，请点击这里。

　　细心的你一定注意到在无序列表的第一个链接中，我们使用了class="an dang"，这是一种特殊的声明方式，大家在实际使用中可以灵活的应用，这一声明表示，这一链接，使用an与dang双重效果。
　　请您特别注意：class="an dang"的结合运用效果，就实现了当前页指引，我们不需要修改任何样式与图片，只需要在当前栏目的 class="an"更改为class="an dang"即可。

　　罗嗦了这么多，我们来看下面的运行效果：


　　如果你的菜单图片没有这么复杂，你完全可以将在五个菜单栏目完全制作成一个图片而不是象现在这样的五个，具体介绍请浏览我爱CSS的另一篇文章。一张图片实现全部五个菜单的图片翻转效果！