如何通过CSS摆脱边界底部？

Question

当鼠标悬停在测试文本上时，如何摆脱测试文本中 li 下的边框底部？

html：

     <div class="rank">
         <ul>
            <li class="tab1 active">test</li>
            <li class="tab2">one</li> 
         </ul>
    </div>
 <div class="content">....</div>

我的风格（它没有摆脱测试文本底部）：

.active{
background-color:#FFFFFF;
}
rank ul li{
float:left;
border:1px solid #D5D5D5;
border-bottom:none;
}

.content{
clear:both;
border-top:1px solid #D5D5D5;
}

ps：为什么当我使用overflow:hidden到rank div时，它可以阻止浮动到content div？

Answer 1

@zhuanzhou;可能你需要玩margin padding 例如

.rank ul{
    border-bottom:1px solid #D5D5D5;
}
.clr{
    clear:both;
}
.active{
background-color:#FFFFFF;
padding-bottom:1px;
margin-bottom:-1px;
}
.rank ul li{
float:left;
border:1px solid #D5D5D5;
border-bottom:none;
    margin-right:10px;
}

.content{
clear:both;
border-top:1px solid #D5D5D5;
}

查看实时演示http://jsfiddle.net/PBBED/

注意：在我的示例中，我使用clear:both代替overflow:hidden clear floated子元素。

Answer 2

.active {
    background-color: #ffffff;
    border-bottom: 1px solid #ffffff;
    margin-bottom: -1px;
}

Answer 3

.active{
background-color:#FFFFFF;
}
ul li{
    display:inline;
}
li{
    border-bottom:1px solid;
}
li:hover{
    border-bottom:none;
}

.content{
clear:both;
border-top:1px solid #D5D5D5;
}

Answer 4

删除css中的第7行然后使用css psuedo类启动一个新的选择器：在最后悬停

rank ul li:hover {
  border-bottom: none;
}

虽然旧浏览器会忽略它，除非它在一个标签上。