纯css tab头

　　　
        #tabs ul{
            list-style:none;
            margin:0;
            padding:0;
        }

        #tabs ul li{
            100px;
            height:20px;
            display:inline-block;
            *display:inline;
            zoom:1;
            border:solid 1px blue;
            border-left-0;
            position:relative;
        }

        #tabs ul li a {
            display: inline-block;
             100px;
            text-align: center;
            text-decoration: none;
            height:20px;
        }

        #tabs ul li a:hover {
            border-bottom:solid 1px #fff;
            _position:absolute;
            /*background-color:#6a5acd;*/
        }
        #tabs ul .first-li{
            border-left-1px;
        }
        #content{
            403px;
            height:70px;
            border:solid 1px blue;
            border-top-0;
        }

<div id="tabs">
    <ul><li class="first-li"><a href="#">tab1</a></li><li><a href="#">tab2</a></li><li><a href="#">tab3</a></li><li><a href="#">tab4</a></li></ul>
    <div id="content"></div>
</div>

ul和li之间没有空行，否则tab之间会有几像素的间距

demo:http://xiziyin.appspot.com/demo/tabs.html