这个可是棘手了啊 怎么做好哦 绝对有深度哦
一导航,其下有子菜单
导航和子菜单是独立的 不在同一元素
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"))
})