导航滑动效果出错，请高人指点！！！！！！
麻烦各位给看一下，怎么鼠标移到后面的标题上，内容就往下错位了？怎么解决阿？谢谢了！！
<style type="text/css">
<!--
.tabs{float:left;width:567px; margin:0;}
.tabs_title{float:left;width:567px; height:22px;}
.tabs_image{float:left;width:87px; height:22px;}
.tabs_title_01{float:left;width:50px; height:20px;padding-left:30px;padding-top:2px;margin:0;background:#FFEEFE; cursor:hand;color:#F769FB;}
.tabs_title_02{float:left;width:50px; height:20px;padding-left:30px;padding-top:2px;margin:0;background:#F9DAFA; cursor:hand;color:#F769FB;}
.tabs_title_03{float:left;padding:0;width:0; height:0px;margin:0; overflow:hidden;color:#F769FB;}
.tabs_content{float:left;width:567px;}
-->
</style>
<SCRIPT language=JavaScript>
var tID=0;
function showTabs(ID){
if(ID!=tID){
TabTitle[tID].className='tabs_title_01';
TabTitle[ID].className='tabs_title_02';
TabContent[tID].style.display='none';
TabContent[ID].style.display='';
tID=ID;
}
}
</script>
<div class="tabs">
<div class="tabs_title">
<div class="tabs_image">title</div>
<div class="tabs_title_02" id="TabTitle" onMouseover="showTabs(0)">标题1</div>
<div class="tabs_title_03"></div>
<div class="tabs_title_01" id="TabTitle" onMouseover="showTabs(1)">标题2</div>
<div class="tabs_title_03"></div>
<div class="tabs_title_01" id="TabTitle" onMouseover="showTabs(2)">标题3</div>
</div>
<div class="tabs_content" id="TabContent" style="display:block;">
<table width="567" border="1" cellpadding="0" cellspacing="0" class="border_pink">
<tr>
<td height="150" align="center" valign="middle" scope="col">内容1</td>
</tr>
</table>
</div>
<div class="tabs_content" id="TabContent" style="display:none;">
<table width="567" border="1" cellpadding="0" cellspacing="0" class="border_pink">
<tr>
<td height="150" align="center" valign="middle" scope="col">内容2</td>
</tr>
</table>
</div>
<div class="tabs_content" id="TabContent" style="display:none;">
<table width="567" border="1" cellpadding="0" cellspacing="0" class="border_pink">
<tr>
<td height="150" align="center" valign="middle" scope="col">内容3</td>
</tr>
</table>
</div>
</div>
参考答案:把tabs_content{float:left;width:567px;} 改为
tabs_content{width:567px;} 就可以了
float 属性的说明:
当该属性不等于 none 引起对象浮动时，对象将被视作块对象( block-level )，即 display 属性等于 block 。也就是说，浮动对象的 display 属性将被忽略。
所以tab1还是占了位了.