CSS滑動門橫向功能表列

效果如下：

              

實現方法：利用一下兩張圖片：                

 

 

前台代碼：

 <div id="nagivation">
            <ul >
                <li ><a href="mainbooks.aspx"><b>首頁</b></a></li>
                <li ><a href ="bookstoretop.aspx?topid=1"><b>文學</b></a></li>
                <li ><a  href ="bookstoretop.aspx?topid=2"><b>小說</b></a></li>
                <li ><a  href ="bookstoretop.aspx?topid=3"><b>藝術</b></a></li>
                <li ><a  href ="bookstoretop.aspx?topid=4"><b>管理</b></a></li>
                <li ><a  href ="bookstoretop.aspx?topid=5"><b>考試</b></a></li>
                <li ><a  href ="bookstoretop.aspx?topid=6"><b>工具書</b></a></li>
                <li ><a href ="bookstoretop.aspx?topid=7"><b>科技</b></a></li>
            </ul>
        </div>

 

 

css：

  #nagivation
        {
            width: 1180px;
            margin-right: auto;
            margin-left: auto;
            height: 28px;
            background-image: url('wangyeimg/daohang.jpg');
            display: block;
        }
        #nagivation ul
        {
            margin: 0px;
            display: block;
            height: 28px;
            padding-left: 8px;
        }
        #nagivation ul li
        {
            display: block;
            float: left;
       
            height: 28px;
            padding-top: 5px;
        }
        #nagivation ul li a
        {
            padding: 5px 0px 0px 14px;
            text-decoration : none;
            color : White;
              height: 30px;
        }
          #nagivation ul li a b
          {
            padding: 0px 14px 0px 0px;
              height: 28px;
        }
            #nagivation ul li a:hover
        {
            background-image: url('wangyeimg/huadong.jpg');
            background-position: right top;
                  
        }
        #nagivation ul li a:hover
        {
            background-image: url('wangyeimg/huadong.jpg');
            color :Red ;
           
        }