倾斜的鼠标翻转导航制作上的烦恼 (1)

display:block; 因为只有这样才可以完全显示背景图片。与overflow:hidden;相结合还可以把A标签中的文字挤出显示区，当然他的父级标签也要有overflow:hidden;不然在IE下还是会出现溢出显示的现象。加上一个背景图，这时浏览一下我们发现五个区块只出现图片的第一区，五个块都是一样的。我们需要把五个块应有的显示内容表现出来。就需要再加一些指令：

1. #b a {background-position: -82px 0px;}
2. #c a {background-position: -164px 0px;}
3. #d a {background-position: -246px 0px;}
4. #e a {background-position: -328px 0px;}

   我们这里看到，中其并没有 #a a 这是因为#a a的显示内容就是当前内容，所以这句可以省了，由于#nav  a中已经定义了背影图片了由于#nav a包括了#a a、#b a…，所以这里只要做好背景的位置就好了。再浏览一下，是正确了，但是还没有鼠标翻转的效果。下面再来把这个鼠标翻转的效果再补上：

1. #a a:hover {background-position: 0 -25px}
2. #b a:hover {background-position: -82px -25px;}
3. #c a:hover {background-position: -164px -25px;}
4. #d a:hover {background-position: -246px -25px;}
5. #e a:hover {background-position: -328px -25px;}

大家也看到了，这里也有很多重复的，可不可以再省略呢？如果只是针对IE流览器是可以的，因为IE在背景两个私有属性叫：background-positionX，background-positionY。但是Firefox与Opera都不支持，所以这里就不能省。基本上是成功了不过还有一个小细节，细心的朋友一定发现了，LI的位置移动是以79PX为一个单位，而图片则都是82PX的，链接也是82PX的大小。所以我们开头的#nav 的长度是错的，正常的是398px，为什么是398px那就自己想想算算吧！下面给出全部的CSS代码：

1. #nav {padding:0; margin:0; width:398px; height:25px; line-height:25px; overflow:hidden; list-style:none; position:relative;}
2. #nav li {width:82px; height:25px; position:absolute; top:0;}
3. #b {left:79px;}
4. #c {left:158px;}
5. #d {left:237px;}
6. #e {left:316px;}
7. #nav a {width:82px; height:25px; padding:30px 0 0 ; overflow:hidden; display:block; background:url(bg.gif) no-repeat;}
8. #b a {background-position: -82px 0px;}
9. #c a {background-position: -164px 0px;}
10. #d a {background-position: -246px 0px;}
11. #e a {background-position: -328px 0px;}
12. #a a:hover {background-position: 0 -25px}
13. #b a:hover {background-position: -82px -25px;}
14. #c a:hover {background-position: -164px -25px;}
15. #d a:hover {background-position: -246px -25px;}
16. #e a:hover {background-position: -328px -25px;}

查看最终效果：
http://andymao.com/andy/demo/20070127/nav.htm

蓝色理想阅读处：
http://bbs.blueidea.com/thread-2716625-1-1.html