how to get rid of the border-bottom by css?

how to get rid of the border-bottom which under test text in the li when the mouse hover on the test text by css?

th开发者_Python百科e html :

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

my style(it's doesn't get rid of the bottom under test text):

.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: why when i use overflow:hidden to rank div, it can prevent the float to the content div?

@zhuanzhou; may be you have to play with margin padding for example

.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;
}

check live demo http://jsfiddle.net/PBBED/

NOTE:in my example i am using clear:both instead of overflow:hidden for clear floated child element.

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

.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;
}

Remove line 7 in your css then start a new selector using the css psuedo class :hover at the end

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

Although, older browser will disregard that unless it is on an a tag.