这个东西描述还是比较困难的，表达能力不好，不过有了图就直接了呵呵
关键点就在于下面这条横线，当选中的时候这条横线看不见了，这个东西肯定很多人都遇到过，也折腾了不少时间和精力，为了以后的一劳永逸，我们现在来分析下解决方案。先贴出核心html代码
Html Code
<ul class="tabnav nostyle">
<li><a href="#" class="active">Tab One</a></li>
<li><a href="#">Tab Two</a></li>
<li><a href="#">Tab Three</a></li>
<li><a href="#">Tab Four</a></li>
</ul>
注：这里的nostyle class是为了调用我重置里面设置的ul为list-style:none等
第一种方法：对ul的浮动不清除，设置ul的高度和a的高度
思路：先设置a标签的高度和border，及背景色，当处在激活状态时，border-bottom和它的背景色一样，然后设置ul的border-bottom为下面的那根线，因为ul没有清除浮动，所以这个下划线默认应该是在上面的，然后给ul设置一个高度，让这个高度正好等于a的高度加a的border-top的高度，这样ul的border-bottom和a的border-bottom刚好重叠。当然ie6因为给ul设置了高度，激活了它的haslayout，使ul的高度实际表现为a的高度加上a的top和bottom高度，这样就不能达到我们的重叠效果了，为了解决这个问题我们给ie6打上bug，设置ul的overflow为hidden，那样ul就表现为我们设置的实际高度了，而不会随着子元素的高度的增加而增加。可是这样ie6还是不能正确显示出那个激活状态的border-bottom，这样我们又得打上一个bug，那就是设置它的position为relative，这样就解决了
Html Code
<div id="demo1" class="demo">
<ul class="tabnav nostyle">
<li><a href="#" class="active">Tab One</a></li>
<li><a href="#">Tab Two</a></li>
<li><a href="#">Tab Three</a></li>
<li><a href="#">Tab Four</a></li>
</ul>
</div>
Css Code
ul.tabnav li{
float:left;
display:inline;
margin-left:8px;
}
.tabnav li a{
border:1px solid #66CC66;
color:#666;
display:block;
padding:0 5px;
line-height:20px;
float:left;
font-weight:bold;
}
.tabnav li a.active,
.tabnav li a:hover{
background-color:#fff;
border-bottom:1px solid #fff;
_position:relative;
}
#demo1 .tabnav{
border-bottom:1px solid #66CC66;
height:21px;
_overflow:hidden;
}
第二种方法：负margin
思路：对ul进行清除浮动（用clearfix方法），然后设置border-bottom。既然清除浮动了，那么ul现在可以正确包裹里面的元素了，然后我们对a元素设置margin-bottom为负的1px（即ul的border-bottom值），那样就刚好把a标签的border-bottom和ul的border-bottom重叠上，再对激活状态的border-bottom进行颜色改变，就好了。当然ie6默认对负margin值不能良好表现出来，需要设置position为relative和激活haslayout，在这里因为a已经激活了haslayout，所以只要加上position:relative就可以表现正常了
Html Code
<div id="demo2" class="demo">
<ul class="tabnav nostyle clearfix">
<li><a href="#" class="active">Tab One</a></li>
<li><a href="#">Tab Two</a></li>
<li><a href="#">Tab Three</a></li>
<li><a href="#">Tab Four</a></li>
</ul>
</div>
Css Code
/* 加上前面的共用样式 */
#demo2 .tabnav li a{
margin-bottom:-1px;
}
#demo2 .tabnav{
border-bottom:1px solid #66CC66;
}
到这里这两种方案都说完了，如果你是崇尚简单标签的人，你会发现其实这个完全可以不用ul来做，直接a标签一个接一个，然后外面包裹个div或者h标题什么的，简单方便
注：这两个解决方案，第一个算是很巧的了，但是偏偏ie6如果元素激活了haslayout，它的高度是随着子元素的高度增加而增加，而不是我们设置的高度那么简单，这也正是我们用来解决ie6的最小高度的这个问题的核心思路，在这里这个反而成了累赘呵呵。第二个主要是对负margin的运用及其在ie6下的bug解决。其实这里还隐藏了一个小知识，那就是a标签的点击范围，ie6下经常会出现a标签只有滑到文字上面才能点击，小心点哦，当然这里是处理了的
