方法一：选项卡无色，用一个空的div即可:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

<script language="javascript" type="text/javascript" src="jquery-1.4.4.min.js"></script>
<style type="text/css">

ul{
    list-style-type:none;

}
ul li{
    float:left;
    height:20px;
    width:100px;
    padding:auto 10px;
    list-style-type:none;
    border-bottom:1px solid red;

}

</style>



</head>

<body>
<div style="height:20px;">
<ul>
    <li>1</i>
    <li>2</li>
    <li>3</li>
</ul>
</div>
<div style="height:0px;margin-top:0px;_margin-top:-1px;border-top:1px solid blue;z-index:-1;position:relative;width:700px;"></div>


</body>
</html>
方法二:选项卡头部有颜色，用js读取li占有的宽度后乘下的宽度补起，相关代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

<script language="javascript" type="text/javascript" src="jquery-1.4.4.min.js"></script>
<style type="text/css">
.htabbox{
    border:1px solid #999;
    width:800px;
}
.htabbox .titlebar ul{
    list-style-type:none;
    margin:0px;
    padding:0px;
    height:25px;
}
.htabbox .titlebar ul li{    
    list-style-type:none;
    float:left;
    text-align:center;
    width:100px;
    height:25px;
    margin:0px;
    padding:0px;
    border-bottom:1px solid blue;
    border-right:1px solid #999;
}    

.htabbox .titlebar ul .titleli{
  border-bottom:1px solid #999;
  background-color:#eaeaea
}

.htabbox .titlebar ul .first{
  border-bottom:1px solid #fff;
  background-color:#fff
}
.htabbox .abox{
  float:right;
  height:25px;
  text-align:right;
  border-bottom:1px solid #999;
}
.htabbox .titlebar{
  height:25px;
  background-color:#eaeaea;
}
.htabbox .abox a{
    margin:5px;
}

.htabbox .content div{
  display:none;
}

</style>
<script language="javascript">
  
    $(function(){
      autodo();
      function autodo(){
        $(".htabbox").each(function(){
        
        var width=$(this).width()-$(this).find("ul:first").width();
        width=width+"px";
        $(this).find(".abox:first").css("width",width);
        $(this).find("li:first").css({"background-color":"#ffffff","border-bottom":"1px solid #fff"});
        $(this).find(".content div:first").css("display","block");

         });
      }

        $(".titleli").mouseover(function(){
            $(this).css({"background-color":"#ffffff","border-bottom":"1px solid #fff"});
            $(this).siblings().css({"background-color":"#eaeaea","border-bottom":"1px solid #999"});
            var index=$(this).parent().find("li").index($(this));
            $(this).parent().parent().next().children().eq(index).show().siblings().hide();
            return false;
        });
       })
</script>

</head>

<body>
<div class="htabbox">
<div class="titlebar">    
    <ul style="float:left">
            <li class="titleli" ><a href="#">1</a></li>
            <li class="titleli"><a href="#">2</a></li>
            <li class="titleli"><a href="#">3</a></li>
        </ul>
    <div class="abox"><a href="#">dsgdsg</a><a href="#">dsgdsg</a><a href="#">dsgdsg</a></div>
</div>
<div class="content">
    <div>sdagjklsdjglasdjhksdjkhdfhdfh</div>
    <div>436453572375375323.2537253.</div>
    <div>fgjfdgjgjdgh4245</div>
</div>
</div>
<br><br>

</body>
</html>