鼠标移开，下拉自动消失

Question

有个菜单栏，当鼠标移上去时会出现下拉，但鼠标移开后，下拉还是存在，除非点了左键，下拉才会自动隐藏，现在想改成不点左键，直接移开自动就会隐藏，该怎么实现
html代码
<!-start->
<link href="images/dropdownmenu/{#tempcolor#}.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="{#CP#}js/dropdownmenu.js"></script>
<div class="dropdownmenu">
<!-start-> <!-menu->
<div id="dorpmenu_{#n#}" class="dorpmenu">
<a href="{#menuurl#}" class="dorpmenu">{#menu#}</a>
</div>
<div id="subdorpmenu_{#n#}" class="subdorpmenu">
{#smenustr#}
</div>
<!-menu->
<!-list->
<li id="dropmenuli_{#id#}" ><a href="{#menuurl#}" class="subdropmenu">{#menu#}</a></li>
<!-list->
<!-end-> 
</div>
<!-end->CSS
.dropdownmenu{
   clear:both;
   margin:0;
   white-space:nowrap;
   overflow:hidden;
   width:100%;
   height:28px;
   color:#fff;
   background-color:#2266aa;
}.dorpmenu{
   float:left;
   width:100px;
   color:#fff;
   border-left:1px solid #6796c4;
   line-height:28px;
   text-align:center;
   margin-left:-1px;
   
}
a.dorpmenu:link,a.dorpmenu:visited,a.dorpmenu:active {
   color: #fff; 
   display:block;
   text-decoration: none;
   line-height:28px;
}
a.dorpmenu:hover {
   color: #fff; 
   text-decoration: none;
   background-color:#477fb9;
   line-height:28px;
} div.subdorpmenu{
   display:none;
   position:absolute;
}div.subdorpmenu ul{
   background-color:#2266aa;
   border:1px #6796c4 solid;
   border-top:0px;
   width:99px;
}div.subdorpmenu ul.firstdrop{
   width:98px;
}div.subdorpmenu li{
   padding:0px;
   list-style-type:none;
   text-align:center;
   line-height:28px; 
   height:28px;   border-top:1px #6796c4 solid;
}div.subdorpmenu li.current{
   height:28px; 
   background-color:#477fb9;
}
div.subdorpmenu a,a.subdorpmenu:link,a.subdropmenu:visited,a.subdorpmenu:active{
   display:block;
   color: #fff; 
   text-decoration: none;
   font:12px/28px Arial;
}a.subdorpmenu:hover {
   display:block;
   color: #fff; 
   text-decoration: none;
   font:12px/28px Arial;
} JS
<!--
//下拉菜单
$(document).ready(function() {

var getObj = $('div.dorpmenu');
getObj.each(function(id) {
var obj = this.id;
var n=parseInt(obj.substr(9)); $("#"+obj).mouseover(function () {
if($("div#subdorpmenu_"+n)[0].style.display!="block"){
$("div.subdorpmenu").hide();
}
$("div#subdorpmenu_"+n)[0].style.top=$("#"+obj)[0].offsetTop+$("#"+obj)[0].offsetHeight+"px";
$("div#subdorpmenu_"+n).show();
if(id==0){
$("div#subdorpmenu_"+n).find("ul")[0].className="firstdrop";
$("div#subdorpmenu_"+n)[0].style.left=$("#"+obj)[0].offsetLeft+1 + "px";
}else{
$("div#subdorpmenu_"+n)[0].style.left=$("#"+obj)[0].offsetLeft + "px";
}
$("div#subdorpmenu_"+n).find("li").mouseout(function () {
this.className="";
});

$("div#subdorpmenu_"+n).find("li").mouseover(function () {
this.className="current";
$("div.subdorpmenu").hide();
$("div#subdorpmenu_"+n).show();
});


}); $("#"+obj).mouseout(function () {
//$("div.subdorpmenu").hide();  //ie6不兼容
}); }); $("body").click(function () {
$("div.subdorpmenu").hide();
});
});-->修改哪处能实现啊，就在这基础上改

Answer 1

试试这样，并把mouseout改成mouseleave$("#"+obj).mouseover(function () {
            if($("div#subdorpmenu_"+n)[0].style.display!="block"){
                $("div.subdorpmenu").hide();
            }
            $("div#subdorpmenu_"+n)[0].style.top=$("#"+obj)[0].offsetTop+$("#"+obj)[0].offsetHeight+"px";
            $("div#subdorpmenu_"+n).show();
            if(id==0){
                $("div#subdorpmenu_"+n).find("ul")[0].className="firstdrop";
                $("div#subdorpmenu_"+n)[0].style.left=$("#"+obj)[0].offsetLeft+1 + "px";
            }else{
                $("div#subdorpmenu_"+n)[0].style.left=$("#"+obj)[0].offsetLeft + "px";
            }
                        $("div#subdorpmenu_"+n).find("li").mouseout(function () {
                this.className="";
            });
            
            $("div#subdorpmenu_"+n).find("li").mouseover(function () {
                this.className="current";
                $("div.subdorpmenu").hide();
                $("div#subdorpmenu_"+n).show();
            });
            
            
        }).mouseleave(function () {
            $("div.subdorpmenu").hide();
        });

Answer 2

你代码里面本来不就是有这个功能，被注释掉了
//下拉菜单
$(document).ready(function() {
    
    var getObj = $('div.dorpmenu');
    getObj.each(function(id) {
        var obj = this.id;
        var n=parseInt(obj.substr(9));        $("#"+obj).mouseover(function () {
            if($("div#subdorpmenu_"+n)[0].style.display!="block"){
                $("div.subdorpmenu").hide();
            }
            $("div#subdorpmenu_"+n)[0].style.top=$("#"+obj)[0].offsetTop+$("#"+obj)[0].offsetHeight+"px";
            $("div#subdorpmenu_"+n).show();
            if(id==0){
                $("div#subdorpmenu_"+n).find("ul")[0].className="firstdrop";
                $("div#subdorpmenu_"+n)[0].style.left=$("#"+obj)[0].offsetLeft+1 + "px";
            }else{
                $("div#subdorpmenu_"+n)[0].style.left=$("#"+obj)[0].offsetLeft + "px";
            }
                        $("div#subdorpmenu_"+n).find("li").mouseout(function () {
                this.className="";
            });
            
            $("div#subdorpmenu_"+n).find("li").mouseover(function () {
                this.className="current";
                $("div.subdorpmenu").hide();
                $("div#subdorpmenu_"+n).show();
            });
            
            
        });        $("#"+obj).mouseout(function () {
            $("div.subdorpmenu").hide();  //ie6不兼容
        });            });    $("body").click(function () {
        $("div.subdorpmenu").hide();
    });
});

Answer 3

前面两位的应该都可以达到效果，你自己后面的
 $("body").click(function () {
        $("div.subdorpmenu").hide();
    });其实本质不就是一个mouseout事件发生了么，或者说blur。反正你要操作的对象失去焦点了