导航滑动效果出错，请高人指点！！！！！！

麻烦各位给看一下，怎么鼠标移到后面的标题上，内容就往下错位了？怎么解决阿？谢谢了！！

<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还是占了位了.