仿造淘宝导航条悬停效果----使用CSS制作心得
  网上有很多关于使用<div>加上CSS来实现导航条效果的源码，但基本没有说明。
最近自己作了一下有一些心得写下来放在这里，大家感兴趣的看一下，希望对大家的
源码修改工作有所帮助。
  选用的例子是仿造淘宝网的导航条，最先是找到子鼠兄弟公布出来的，仿造的不错。

这是CSS定义部分：
   body{ font-size:12px; text-align:center; margin-top:0px; font-family:Verdana;}
   //定义了字体的大小；   文本对齐的格式；   页面顶端的空白； 后面的字体都强制使用前面的定义
   div,img{margin:0; padding:0; border:0;}
   //定义了图片和格式的周边空白大小,填充时离开各边的距离,边框的粗细
   ul,li{list-style-type: none; margin:0; padding:0; float:left; }
   //定义了list-style-type的对象(见相关手册) margin:两个项之间的间距 float:对象浮在的位置
   #info{ margin-left:auto; margin-right:auto;width:760px; text-align:left;}//定义格式
   #nav{ height:30px; width:610px; margin-left:auto; margin-right:auto;}//显示的范围
   #nav li{margin-left:0px; height:30px;} //margin:两个项之间的间距
   #nav li a{ display:block;float:left; text-decoration:none; background-image: url
('images/r.gif');background-repeat: no-repeat; display:block; background-position: left top;}
//    background-image设置图片的位置,我们的变色就要靠它了
background-position:用于检索图像的原点定位
   #nav a span{cursor:hand; color:#000;background-image: url('images/v.gif');background-repeat: no-repeat; display:block;background-position: right top; float:left; padding-left:10px;
padding-right:10px; padding-top:7px; padding-bottom:2px }
//设置项中文字的格式 以及填充物到各边的距离
   #nav li a:active,#nav li a:hover {margin-top:0px; }
   #nav li a:active span,#nav li a:hover span {padding:10px 10px 0px 10px; margin-top:0px; display:block; color:#FFF;}
   //设置项中文字的格式 以及填充物到各边的距离 padding 四个参数按顺序分别是上左下右
//下面是各个项的具体设置,使用两幅类似调色板的图片通过设置坐标来检索,找到显示的
位置将图片显示出来
   #zishu01 a:link,#zishu01 a:visited {background-position: 0px -27px;}
   #zishu01 a:link span,#zishu01 a:visited span{background-position:right -27px;padding:10px 10px 6px 10px; margin-top:0; color:#FFF; font-weight:bold;}
//分别设定了当链接项处于不同状态的反应,这里显示以右对齐 纵轴往下27px显示图片(
这个根据你的需要，可以自己ps图片和设置.字体的颜色 字体
//想要各个项当鼠标悬停时出现不同颜色可以仿照上面子鼠01的设置多设几个.只要改动
background-position后面的值即可第一个是图片显示的起始位置 后一个是悬停时到达
的图片显示位置.可以根据你作的图片两个颜色的间距差来设定.
   #zishu02 a,#zishu03 a,#zishu04 a,#zishu05 a,#zishu06 a,#zishu07 a,#zishu08 a,#zishu09 a,#zishu10 a,#zishu11 a{margin-top:0px;}
   #zishu02 a:active,#zishu02 a:hover {background-position: -57px -87px;}
   #zishu02 a:active span,#zishu02 a:hover span{background-position:right -87px;}
   #zishu03 a:active,#zishu03 a:hover {background-position: 0px -87px;}
   #zishu03 a:active span,#zishu03 a:hover span{background-position:right -87px;}
   #zishu04 a:active,#zishu04 a:hover {background-position: 0px -117px;}
   #zishu04 a:active span,#zishu04 a:hover span{background-position:right -117px;}
   #zishu05 a:active,#zishu05 a:hover {background-position: -57px -147px;}
   #zishu05 a:active span,#zishu05 a:hover span{background-position:-147px right;}
   #zishu06 a:active,#zishu06 a:hover {background-position: 0px -177px;}
   #zishu06 a:active span,#zishu06 a:hover span{background-position:right -177px;}
   #zishu07 a:active,#zishu07 a:hover {background-position: 0px -207px;}
   #zishu07 a:active span,#zishu07 a:hover span{background-position:right -207px;}
   #zishu08 a:active,#zishu08 a:hover {background-position: 0px -237px;}
   #zishu08 a:active span,#zishu08 a:hover span{background-position:right -237px;}
   #zishu09 a:active,#zishu09 a:hover {background-position: 0px -267px;}
   #zishu09 a:active span,#zishu09 a:hover span{background-position:right -267px;}
   #zishu10 a:active,#zishu10 a:hover {background-position: 0px -297px;}
   #zishu10 a:active span,#zishu10 a:hover span{background-position:right -297px;}
   #zishu11 a:link span,#zishu11 a:visited span{color:#FF6600;}
   #zishu11 a:active,#zishu11 a:hover {background-position: 0px -327px;}
   #zishu11 a:active span,#zishu11 a:hover span{background-position:right -327px;}
//导航条项下面的长条
   #menu{ width:760px; height:26px; background:#FF9900;}
   #r1{border-top: 0px;border-bottom: 0px; border-left:3px solid #fff;border-right:3px solid #fff; height:1px; overflow:hidden;}
   #r2{border-top: 0px;border-bottom: 0px; border-left:2px solid #fff;border-right:2px solid #fff; height:1px; overflow:hidden;}
   #r3{border-top: 0px;border-bottom: 0px; border-left:1px solid #fff;border-right:1px solid #fff; height:1px; overflow:hidden;}

这个是显示部分 放在body下面
<div id="info"> <div id="nav">
   <ul><li id="zishu01"><a href="index.asp" title="首 页"><span> 首 页 </span></a></li>
//通过对li 的id来调用悬停的效果 随便你放多少种只要你愿意
   <li id="zishu02"><a href="#" ><span>#</span></a></li>
    <li id="zishu03"><a href="#"><span>#</span></a></li>  
    <li id="zishu04"><a href="#"><span>#</span></a></li>
    <li id="zishu05"><a href="#"><span>#</span></a></li>
        </ul>
            </div>
          </div>
//调用菜单条
       <div id="menu">
            <div id="r1"></div>
            <div id="r2"></div>
              <div id="r3"></div>
              </div>


  这样你想要的悬停变色的效果就可以出来了，至于怎么变色就看你用的图片是做成什么样的。
  通过这次制作，对css中显示的定位设置也有了一些了解。更大的收获是开拓了思路，知道
可以通过显示图片的不同部分来实现变色。触类旁通，还有很多其他的技术也是这样的道理，只
要善于组合，简单的东西累积起来也可以有复杂的功能。