滑动门导航条

滑动门导航条代码如下：要注意background-position的设置，原理是a的鼠标经过背景改变和 #navi_ul li a:hover span的背景改变

<ul id="navi_ul"><li><a href="#"><span> 博客专栏</span></a> </li><li><a href="#"><span>博客专家</span></a> </li><li><a href="#"><span>热门文章</span></a> </li><li><a href="#"><span>排行榜</span></a> </li></ul>

css：

#navi_ul li

{

    float:left;

    list-style:none;

    margin-left:10px;

    margin-right:10px;

    

    }

#navi_ul

{

   margin:0px;

   padding:0px;

   position:relative;

   top:25px;

   left:210px;

    }               

       

#navi_ul li a

{

    text-decoration:none;

    color:White;

    font-weight:bolder;

    padding:2px 0px 4px 10px;

    }

  #navi_ul li a span

  {

      padding:2px 10px 4px 0px;

      

            }  

#navi_ul li a:hover

{

    color:#BC050C;

    background:url(img/l.jpg) no-repeat ;

    background-position:left top;

    

    } 

#navi_ul li a:hover span

{

    color:#BC050C;

    background:url(img/r.jpg) no-repeat right top;

    }