Css 分栏的导航条

制作了一个风格还不错的CSS 导航条。

 

Css 如下：

#thicktabs{
margin: 0;
padding: 0;
float: left;
font: bold 12px Tahoma;
}

#thicktabs li{
display: inline;
}

#thicktabs li a{
float: left;
color: white;
padding: 4px 10px;
text-decoration: none;
background:  top right no-repeat;
border-right: 1px solid #ffffff; /*right border style*/
background-position: top left; /* www.webdm.cn */

}

#thicktabs li a#leftmostitem{
border-left: 1px solid #ffffff; /*left border style*/
}

#thicktabs li a#rightmostitem{
border-right: 1px solid #ffffff; /*right border style*/
background-position: top left; /* www.webdm.cn */
}

#thicktabs li a:visited{
color: white;
}

#thicktabs li a:hover{
color: white;
background-color:aqua;
}

<!--[if IE]>
p.iepara{
padding-top: 1em;
}
<![endif]-->

 

 

 

 

 

       <table align="center" width="400px" cellpadding="0" cellspacing="0" border="0">
         <tr>
           <td>
            <ul id="thicktabs">
              <li><a id="leftmostitem" href="/">Home Page</a></li>
              <li><a href="/">Products</a></li>
              <li><a href="http://www.webdm.cn/">Catelogs</a></li>
              <li><a href="/">About Us</a></li>
            </ul>
          </td>
         </tr>
       </table>