css布局问题？请问下面这段代码 为什么:hover中的border-bottom不起作用？？
<style>body,ul{margin:0;padding:0}
li{list-style:none}
#gallery_tab{
margin:30px;
position:relative;
left:0;
top:50px;
}
#gallery_tab ul{
position:relative;
height:50px;
float:left;
clear:both;
}
#gallery_tab li{
position:relative;
float:left;
border:1px #CCC solid;
border-top:none;
}
li.tab1{
background:#090;
}
li.tab2{
background:#039;
}
li.tab3{
background:#060;
}
li.tab4{
background:#369;
}
li.tab5{
background:#300;
}
li.tab1:hover{
background:#099;
border-bottom:none;
}
li.tab2:hover{
background:#099;
border-bottom:none;
}
li.tab3:hover{
background:#099;
border-bottom:none;
}
li.tab4:hover{
background:#099;
border-bottom:none;
}
li.tab5:hover{
background:#099;
border-bottom:none;
}
#gallery_tab a{
float:left;
display:block;
margin-top:4px;
padding:0 6px;
height:46px;
line-height:46px;
background:white;
}
</style>
</head>
<body>
<!--tab菜单部分-->
<div id="gallery_tab">
<ul>
<li class="tab1"><a>ALL</a></li>
<li class="tab2"><a>JavaScript Util Functions</a></li>
<li class="tab3"><a>UI Components</a></li>
<li class="tab4"><a>Framework</a></li>
<li class="tab5"><a>Applications</a></li>
</ul>
</div>
<!--tab菜单部分结束-->
</body>
