这个原理经常用到，记得当初，我第一次发现这个东西是在谷歌的音乐。
http://www.google.cn/music/homepage看上面的分类导航，为什么点击选中之后，下面蓝色的线没了。
今天看到新浪的首页的导航条，也有这样的应用。
这里中间是有线的，但左边的线怎么没了。这两个导航结构是相同的。
这是标准的html代码：
<div>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
完整的代码如下
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{margin:0;padding:0;margin:100px;}
a{ text-decoration: none;}
li{list-style:none;}
ul li div{margin:0;padding:0;}
.test1{border-bottom:1px solid; height: 23px;}
.test1 li{
float: left;
margin-right: 5px;
text-align: center;
width: 80px;
}
.test1 a{
background: url("http://www.google.cn/music/images/navi_active.gif");
display: block;
height: 19px;
padding-top: 4px;
}
.test1 .actived{
background: url("http://www.google.cn/music/images/navi_active.gif");
border-bottom: 1px solid #FFFFFF;
}
.test2{ display:inline;width: 107px;}
.test2 ul{height: 23px;margin:0;padding:0;overflow:hidden;}
.test2 li{margin-left:-1px;padding:0 6px;line-height:12px;float: left;background: url("http://i1.sinaimg.cn/dy/deco/2009/0825/sinahome_0803_ws_002_new.gif") no-repeat scroll 0 -250px transparent;}
</style>
</head>
<body>
<div class="test1">
<ul>
<li><a href="">首页1</a></li>
<li><a href="">首页1</a></li>
<li class="actived"><a href="">首页1</a></li>
<li><a href="">首页1</a></li>
</ul>
</div>
<br /><br /><br /><br /><br />
<div class="test2">
<ul>
<li><a href="">dw</a></li>
<li><a href="">dw</a></li>
<li><a href="">dw</a></li>
</ul>
</div>
</body>
</html>