根据页面设计的需要，有时候我们使用图象翻转菜单，所谓图象翻转菜单是指在链接状态、鼠标激活状态实现不同的图片效果。
在通常的图象翻转菜单制作中，会出现闪烁的情况，这是因为图片载入延时所造成的，也就是图象还未完全加载没能完全显示，加载时间的间隔就会出现闪烁的现象。
我们今天所要讨论的是将图象翻转菜单的多种状态制作成一张图片，我们应用css对背景图片的位置进行控制，进而实现一张图片多种状态的图象翻转菜单效果。
这张图片从上至下结合了三个不同的状态，链接样式，激活样式，当前页样式。
来看下面的css代码：
Example Source Code
[www.21shipin.com]#nav {height:43px; width:700px; margin:18px 0 0 38px;}
#nav ul {
font-size:12px;
color:#000;
}
#nav li {
width:115px;
height:43px;
display:block;
float:left;
list-style-type:none;
margin-right:2px;
overflow:hidden;
}
#nav li a {
display:block;
width:115px;
height:43px;
padding:50px 0 0 0;
overflow:hidden;
text-align:center;
}
#nav li a.an {background: url(buttom.jpg) no-repeat 0 0;}
#nav li a:hover {background-position: 0 -43px;}
#nav li a.dang {background-position: 0 -86px;}
我们来看下面的xhtml代码：
Example Source Code
[www.21shipin.com]<div id="nav">
<ul>
<li><a href="http://www.21shipin.com/" class="an dang" title="21视频教程 21shipin.com">21shipin.com</a></li>
<li><a href="http://www.21shipin.com/" class="an" title="21视频教程 21shipin.com">21shipin.com</a></li>
<li><a href="http://www.21shipin.com/" class="an" title="21视频教程 21shipin.com">21shipin.com</a></li>
<li><a href="http://www.21shipin.com/" class="an" title="21视频教程 21shipin.com">21shipin.com</a></li>
<li><a href="http://www.21shipin.com/" class="an" title="21视频教程 21shipin.com">21shipin.com</a></li>
</ul>
</div>
#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"即可。
罗嗦了这么多，我们来看下面的运行效果：
Source Code to Run [www.21shipin.com]
QQ：2693987339(点击联系)购买教程光盘
:
