如何让（更多）鼠标离开后，下拉框就消失

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
/* --整体-- */
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-color: #dfd3b9;
    background-repeat: repeat-x;
    font-family:"宋体",Verdana, Helvetica, sans-serif;
    font-size: 12px;
    color: #000;
}
div, ul, li, ol, form, h1, h2, h3, h4, h5, h6, h7, img,p { margin: 0px; padding: 0px; list-style: none; }
img{border:0 none;} 
a {
    font-size: 12px;
    color: #000000;
}
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #000000;
}
a:hover {
    text-decoration: underline;
    color: #000000;
}
a:active {
    text-decoration: none;
    color: #000000;
}
/* -- 头部 -- */
.top{ width:970px; height:132px;}
.top .logo{ width:233px; height:120px; float:left;}
.top .con{ width:730px; height:120px; float:right;}
.top .con .lc{ width:630px; float:left;padding:40px; 0 0 20px}
.top .con .lc .tab_btn { height: 25px;}
.top .con .lc .tab_btn li { float: left; width: 40px; height: 25px;line-height: 25px; text-align: center; cursor: pointer; 
font-weight: normal; font-size: 12px; margin:0 4px 0 0; }
.top .con .lc .tab_btn li a.here{
    color: #fff;
    font-weight: bold;
    background-color: #77602a;display:block
}
.top .con .lc .tab_btn li a{ color: #e7dfca; font-weight: normal; background-color: #433412; display:block}
.top .con .lc .wrap {background-image: url();background-repeat: no-repeat;}
.top .con .lc .tab_box {}
.top .con .lc .tab_box .guang{width:600px;height:28px; overflow:hidden; padding:2px 0 0 0;}
.top .con .lc .tab_box .keyword{color: #fff;}
.top .con .lc .tab_box .guang .zltsearch_i{
    width:510px;
    height:25px;
    font-size:14px;
    color:#000;
    line-height:25px;
     float:left; margin:0 0 0 4px;}
.top .con .lc .tab_box .guang .zltsearch_s{
    float:right;
    background-image: url();
    background-repeat: no-repeat;
    height: 26px;
    width: 71px;
    margin-top: 0;
    margin-right: 2px;
    margin-bottom: 0;
    margin-left: 0;
    border:0
}
.top .con .ls{ width:90px; float:right;}
.top .con .ls ul{ padding-top:40px}
#more{width:100px;height:25px;line-height:30px;color:#ccc;background-color:#333;}
#list{display:none;background:red;}
#list li{width:100px;height:28px;line-height:28px;color:#eee;background-color:#999;}
.more_pra{position:relative;}
-->
</style>
<script src="http://product.pcpop.com/js/jquery.js"></script>
<script>
function subQuery()
                {
                    var searchTypeId = document.sform1.searchType.value;
                    //alert(document.sform1.searchType.value);
                    var keyWord =document.getElementById("query").value;
                    var keyWordNews =document.getElementById("query1").value;
                    var url = "";
                    
                      switch(searchTypeId)
                        {
                            case "1": 
                                url ='1';
                                break;
                            case "2": 
                                url ='1';
                                break;
                            case "3": 
                                     url ='1';
                                break;        
                            case "4": 
                                     url ='1';
                                break;                          
                            
                        }
                        var formSubmit =document.getElementById('sform1');
                        formSubmit.action=url;
                        //formSubmit.submit();
                        //return false;
                    
                }
                
                
function shosearch(sid)
    {
        var searchform = document.sform1.searchType;
        var hform = document.sform1;
        searchform.value=sid;
        for(var si =1;si<=4;si++)
        {
           document.getElementById("tab8_"+si).className="";
        }
        document.getElementById("tab8_"+sid).className="here";    
        var keyWord =document.getElementById("query").value;
        var keyWordNews =document.getElementById("query1").value;
        switch(sid)
        {
            case 1: 
                 hform.query1.style.display="none";
                 hform.query.style.display="";                 
                break;
            case 2: 
                   hform.query1.style.display="";
                   hform.query.style.display="none";    
                break;
            case 3: 
                 hform.query1.style.display="";
                 hform.query.style.display="none";
                break;
            case 4: 
                 hform.query1.style.display="";
                 hform.query.style.display="none";
                break;
            default:
                 hform.query.style.display="";
                 hform.query1.style.display="none";
                break;
        }
        if (sid==1)
        {
           if (keyWordNews!="") 
               document.getElementById("query").value =  keyWordNews;
           
        }
        else
        {
           if (keyWord!="") 
           {
             document.getElementById("query1").value = keyWord;
           }
        }
     }
</script>
<script type="text/javascript">
window.onload=function()
{
var oH2More=document.getElementById('more');
var oUlList=document.getElementById('list');
var aLi=oUlList.getElementsByTagName('li');
var oBloon=false;
var i=0;
oH2More.onclick=function()
{
if(oBloon)
{
oUlList.style.display="none";
oBloon=false;
}
else
{
oUlList.style.display="block";
oBloon=true;
}
}
for (i=0;i<aLi.length ;i++ )
{
aLi[i].onclick=function()
{
oH2More.innerHTML=this.innerHTML;
};
}
};
</script>
</head>
<body>
<div class="box">
    <div class="top">
            <div class="logo"></div>
            <div class="con">
             <div class="lc">
             <ul class="tab_btn">
               <li><a class="here" href="javascript:void(0)" id="tab8_1" onClick="shosearch(1);" target="_self" 
onFocus="this.blur()">文字1</a>
</li>
               <li><a href="javascript:void(0)" id="tab8_2" onClick="shosearch(2);" target="_self" onFocus="this.blur
()">文字2</a></li>
               <li><a href="javascript:void(0)" id="tab8_3" onClick="shosearch(3);" target="_self" onFocus="this.blur
()">文字3</a>
</li>
 <li class="more_pra">
<h2 id="more">更多</h2>
<ul id="list">
<li><a href="#">111</a></li>
<li>222</li>
<li><a href="javascript:void(0)" id="tab8_4" onClick="shosearch(4);" target="_self" onFocus="this.blur
()">文字4</a>
</li> </ul></li>
             </ul>
               <div class="wrap">
               
                        <div class="tab_box">
                           <div class="guang">
                            <form name="sform1" id="sform1" method="post" target="_blank" action="" onSubmit="subQuery();">
                              <input type="text" class="zltsearch_i" id="query" name="query" value="" /><input type="text" 
class="zltsearch_i" id="query1" name="query1" style="display:none;" onClick="sform1.query.value=''" /><input type="submit" 
class="zltsearch_s" id="btnFSearch" value="搜索" /><input type="hidden" value="1" name="searchType" id="searchType">
                            </FORM>
                           </div>
                           <div class="keyword">
                            <script src="1.js"></script>
                           </div>
                        </div>
                        
                        
                        
               </div>  
        </div>
         <div class="ls">
           <ul>
             <li></li>
            </ul>
           </div>
     </div>
    </div>
    
</div>
</body>
</html>

解决方案 »

  1.   

    onmouseout :下拉框.display='none'
      

  2.   

    帮你把结构小改了下
    1:把list的列表放到了h2里面
    2:去掉js控制弹出，而是移动到更多上弹出，如果不行，咱再改。
    3:添加样式#more:hover ul{
    display:block;
    }
    #list{
    margin-top:-5px;
    }
    总代码如下:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    <!--
    /* --整体-- */
    body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        background-color: #dfd3b9;
        background-repeat: repeat-x;
        font-family:"宋体",Verdana, Helvetica, sans-serif;
        font-size: 12px;
        color: #000;
    }
    div, ul, li, ol, form, h1, h2, h3, h4, h5, h6, h7, img,p { margin: 0px; padding: 0px; list-style: none; }
    img{border:0 none;} 
    a {
        font-size: 12px;
        color: #000000;
    }
    a:link {
        text-decoration: none;
    }
    a:visited {
        text-decoration: none;
        color: #000000;
    }
    a:hover {
        text-decoration: underline;
        color: #000000;
    }
    a:active {
        text-decoration: none;
        color: #000000;
    }
    /* -- 头部 -- */
    .top{ width:970px; height:132px;}
    .top .logo{ width:233px; height:120px; float:left;}
    .top .con{ width:730px; height:120px; float:right;}
    .top .con .lc{ width:630px; float:left;padding:40px; 0 0 20px}
    .top .con .lc .tab_btn { height: 25px;}
    .top .con .lc .tab_btn li { float: left; width: 40px; height: 25px;line-height: 25px; text-align: center; cursor: pointer; 
    font-weight: normal; font-size: 12px; margin:0 4px 0 0; }
    .top .con .lc .tab_btn li a.here{
        color: #fff;
        font-weight: bold;
        background-color: #77602a;display:block
    }
    .top .con .lc .tab_btn li a{ color: #e7dfca; font-weight: normal; background-color: #433412; display:block}
    .top .con .lc .wrap {background-image: url();background-repeat: no-repeat;}
    .top .con .lc .tab_box {}
    .top .con .lc .tab_box .guang{width:600px;height:28px; overflow:hidden; padding:2px 0 0 0;}
    .top .con .lc .tab_box .keyword{color: #fff;}
    .top .con .lc .tab_box .guang .zltsearch_i{
        width:510px;
        height:25px;
        font-size:14px;
        color:#000;
        line-height:25px;
         float:left; margin:0 0 0 4px;}
    .top .con .lc .tab_box .guang .zltsearch_s{
        float:right;
        background-image: url();
        background-repeat: no-repeat;
        height: 26px;
        width: 71px;
        margin-top: 0;
        margin-right: 2px;
        margin-bottom: 0;
        margin-left: 0;
        border:0
    }
    .top .con .ls{ width:90px; float:right;}
    .top .con .ls ul{ padding-top:40px}
    #more{width:100px;height:25px;line-height:30px;color:#ccc;background-color:#333;}
    #list{display:none;background:red;}
    #list li{width:100px;height:28px;line-height:28px;color:#eee;background-color:#999;}
    .more_pra{position:relative;}
    #more:hover ul{
    display:block;
    }
    #list{
    margin-top:-5px;
    }
    -->
    </style>
    <script src="http://product.pcpop.com/js/jquery.js"></script>
    <script>
    function subQuery()
                    {
                        var searchTypeId = document.sform1.searchType.value;
                        //alert(document.sform1.searchType.value);
                        var keyWord =document.getElementById("query").value;
                        var keyWordNews =document.getElementById("query1").value;
                        var url = "";
                        
                          switch(searchTypeId)
                            {
                                case "1": 
                                    url ='1';
                                    break;
                                case "2": 
                                    url ='1';
                                    break;
                                case "3": 
                                         url ='1';
                                    break;        
                                case "4": 
                                         url ='1';
                                    break;                          
                                
                            }
                            var formSubmit =document.getElementById('sform1');
                            formSubmit.action=url;
                            //formSubmit.submit();
                            //return false;
                        
                    }
                    
                    
    function shosearch(sid)
        {
            var searchform = document.sform1.searchType;
            var hform = document.sform1;
            searchform.value=sid;
            for(var si =1;si<=4;si++)
            {
               document.getElementById("tab8_"+si).className="";
            }
            document.getElementById("tab8_"+sid).className="here";    
            var keyWord =document.getElementById("query").value;
            var keyWordNews =document.getElementById("query1").value;
            switch(sid)
            {
                case 1: 
                     hform.query1.style.display="none";
                     hform.query.style.display="";                 
                    break;
                case 2: 
                       hform.query1.style.display="";
                       hform.query.style.display="none";    
                    break;
                case 3: 
                     hform.query1.style.display="";
                     hform.query.style.display="none";
                    break;
                case 4: 
                     hform.query1.style.display="";
                     hform.query.style.display="none";
                    break;
                default:
                     hform.query.style.display="";
                     hform.query1.style.display="none";
                    break;
            }
            if (sid==1)
            {
               if (keyWordNews!="") 
                   document.getElementById("query").value =  keyWordNews;
               
            }
            else
            {
               if (keyWord!="") 
               {
                 document.getElementById("query1").value = keyWord;
               }
            }
         }
    </script></head>
    <body>
    <a>asdfasd</a>
    <div class="box">
        <div class="top">
                <div class="logo"></div>
                <div class="con">
                 <div class="lc">
                 <ul class="tab_btn">
                   <li><a class="here" href="javascript:void(0)" id="tab8_1" onClick="shosearch(1);" target="_self" 
    onFocus="this.blur()">文字1</a>
    </li>
                   <li><a href="javascript:void(0)" id="tab8_2" onClick="shosearch(2);" target="_self" onFocus="this.blur
    ()">文字2</a></li>
                   <li><a href="javascript:void(0)" id="tab8_3" onClick="shosearch(3);" target="_self" onFocus="this.blur
    ()">文字3</a>
    </li>
     <li class="more_pra">
        <h2 id="more">更多<ul id="list">
            <li><a href="#">111</a></li>
            <li>222</li>
            <li><a href="javascript:void(0)" id="tab8_4" onClick="shosearch(4);" target="_self" onFocus="this.blur
    ()">文字4</a>
    </li>    </ul></h2>
        </li>
                 </ul>
                   <div class="wrap">
                   
                            <div class="tab_box">
                               <div class="guang">
                                <form name="sform1" id="sform1" method="post" target="_blank" action="" onSubmit="subQuery();">
                                  <input type="text" class="zltsearch_i" id="query" name="query" value="" /><input type="text" 
    class="zltsearch_i" id="query1" name="query1" style="display:none;" onClick="sform1.query.value=''" /><input type="submit" 
    class="zltsearch_s" id="btnFSearch" value="搜索" /><input type="hidden" value="1" name="searchType" id="searchType">
                                </FORM>
                               </div>
                               <div class="keyword">
                                <script src="1.js"></script>
                               </div>
                            </div>
                            
                            
                            
                   </div>  
            </div>
             <div class="ls">
               <ul>
                 <li></li>
                </ul>
               </div>
         </div>
        </div>
        
    </div>
    </body>
    </html>
      

  3.   

    好像#more:hover 在IE6下不支持
      

  4.   

    在你的onclick下面添加：
    oH2More.onmouseout=function(){
    oUlList.style.display="none";
            oBloon=false;
    }
    就行了
      

  5.   

    <script type="text/javascript">
    window.onload=function()
    {
        var oH2More=document.getElementById('more');
        var oUlList=document.getElementById('list');
        var aLi=oUlList.getElementsByTagName('li');
        var oBloon=false;
        var i=0;
        oH2More.onclick=oUlList.onmouseover=function()
        {
            oUlList.style.display="block";
        }    oH2More.onmouseout=function()
        {
            oUlList.style.display="none";
    }
        for (i=0;i<aLi.length ;i++ )
        {
            aLi[i].onclick=function()
            {
                oH2More.innerHTML=this.innerHTML;
                oUlList.style.display="none";
            };
        }
    };
    </script>
      

  6.   

    的确是，没注意。不过，这个你应该举一反三，自己改改就行了。有不会的，别人指引一下，关键还得自己学会啊。 oH2More.onclick=oUlList.onmouseover=function()
    {
    oUlList.style.display="block";
    } oH2More.onmouseout=oUlList.onmouseout=function()
    {
    oUlList.style.display="none";
    }
      

  7.   

    怪了
    oH2More.onmouseout=oUlList.onmouseout=function()
    我刚才也是加了这个，没实现，现在能实现了，怪异谢谢，OK了