我在我的网站顶部创建了自己的显示菜单脚本,但我遇到了一些问题
基本问题是
当我将鼠标放在显示菜单的链接上时,菜单会在第一时间完美显示,
但是,如果我将鼠标放在菜单显示的 div -show until - 上,此菜单将一直隐藏并且不会保留
使用此脚本,我尝试显示div
,当鼠标离开此脚本时div
,将其隐藏
我的脚本是这样的:
function menu(id,width,color)
{
$(".men"+id).mouseover(function(e) {
//
//$(".m"+id).show("blind", { direction: "vertical" }, 500);
//$(".m"+id).show(500);
$(".m"+id).css("width",""+width);
$(".m"+id).show("slide", { direction: "up" }, 500);
$(".m"+id).css("background-color",""+color);
e.stopPropagation();
e.stopImediatePropagation();
});
$(".m"+id).mouseout(function(e) {
$(this).hide(500);
e.stopPropagation();
e.stopImediatePropagation();
});
}
CSS 样式:
#content_menu
{
margin-top:7px;
position:absolute;
min-height:50px;
height:auto;
border:1px solid;
text-align:left;
font-family:Arial;
font-size:12px;
z-index:2;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
#content_menu_into
{
position:relative;
width:98%;
min-height:28px;
height:auto;
line-height:28px;
font-family:Arial;
font-size:14px;
color:#000000;
padding-left:2%;
text-align:left;
}
对于调用脚本:
<a href="#" onmouseover="javascript:menu('1','200','#000000');" class="men1">
Home Web Menu
</a>
<div id="content_menu" class="m1" style="display:none;">
<div id="content_menu_into">
Home
News
Articles
Users
Vote
</div>
</div>
谢谢帮忙,新年快乐!!!