日期:2014-05-17  浏览次数:20705 次

这个可是棘手了啊 怎么做好哦 绝对有深度哦
一导航,其下有子菜单

导航和子菜单是独立的 不在同一元素

HTML如下:

<table border="0" id="daohangysbj" >
  <tr>
  <td class="neidaobjrt" ><a href="index.asp">首页</a></td>
  <td class="neidaobjrt" id="menu1" onMouseOver="javascript:reshow('menu1')"><a href="about.asp">公司简介</a>
<div style="display:none;position:absolute; width:92px; background-color:#00adff" id="menu1s">
<table width="100%" border="0" cellspacing="0" cellpadding="0">

  <tr>
  <td align="center" style="border-bottom:1px solid #ffffff; height:25px;">公司文化</td>
  </tr>
  <tr>
  <td align="center" style="border-bottom:1px solid #ffffff; height:25px;" >公司文化</td>
  </tr>
  <tr>
  <td align="center" style="border-bottom:1px solid #ffffff; height:25px;">公司文化</td>
  </tr>
  <tr>
  <td align="center" style="border-bottom:1px solid #ffffff; height:25px;">公司文化</td>
  </tr>
  <tr>
  <td align="center" height="25">公司文化</td>
  </tr>
  
</table>
</div>

</td>
</tr>
</table>

js:

function reshow(idv)
{  
  var txt=$("#"+idv).offset();
var txtop=txt.top;
var txleft=txt.left;
$("#"+idv+"s").fadeIn("slow");
$("#"+idv+"s").offset("top:"+txtop+30,"left:"+txleft);

}
function reclose(idv)
{  

$("#"+idv+"s").fadeOut("slow");

}

问题就在于 用户鼠标离开子菜单或者导航的时候 能让子菜单消失掉

现在怎么弄好呢? onmouseout 怎么放? 

放在导航上 用户无法点击子菜单 放在子菜单上更无法点击到了 怎么办额 
高分求完美的解决方法

------解决方案--------------------
离开导航的时候。。写个判断光标在不在子菜单上。。
------解决方案--------------------
可以用hover。
$(".neidaobjrt").hover(function(){
reshow($(this).attr("id"))
},function(){
reclose($(this).attr("id"))
})