<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script src="jquery-1.4.3.min.js"></script>
</head>
<script>
var current_index=0;
function navOver(index) {
if(current_index==index){
$("#nav_div").show();
return;
}
var navObj=$("#nav_div_child div[id^=nav_"+index+"]");
if(navObj.length==0)return;
current_index=index;
var navHtml="";
navObj.each(function(){
navHtml+="<td>"+this.innerHTML+"</td>";
});
$("#nav_tr").html(navHtml);
$("#nav_div").show();
}
function navOut(index) {
$("#nav_div").hide();
}
</script>
<body>
<table style="width:400px;text-align:center;border:0px solid red" border="0"" cellpadding="0" cellspacing="0">
<tr>
<td >
<div οnmοuseοver="navOver(1)" οnmοuseοut="navOut(1)">
菜单1
</div>
</td>
<td>
<div οnmοuseοver="navOver(2)" οnmοuseοut="navOut(2)" >
菜单2
</div>
</td>
</tr>
</table>
<div id="nav_c" style="position:absolute;height:25px;width:100%" >
<div id="nav_div" style="background:#FFF;display:none;border:1px solid #CCC" οnmοuseοver='javascript:$("#nav_div").show();' οnmοuseοut="navOut()">
<table id="nav_table">
<tr id="nav_tr">
</tr>
</table>
</div>
</div>
<div style="display:none" id="nav_div_child">
<div id="nav_1_5" >子菜单01</div>
<div id="nav_1_6" >子菜单02</div>
<div id="nav_1_7" >子菜单03</div>
<div id="nav_2_8" >子菜单21</div>
</div>
<body>
</html>