浮动层中的select下拉列表展开后导致层消失的问题

我做的效果是：光标滑过一级菜单后出现二级菜单，滑过显示出来的二级菜单后保持悬停显示状态，滑出二级菜单后隐藏当前二级菜单。
当二级菜单层中包含普通的文字连接等元素时效果正常实现了。
但是，当二级菜单层中包含select下拉列表时就出现问题了：
当展开二级菜单层中包含的select下拉列表后 光标在列表中移动时，所在二级菜单层就消失了，如图：
而在ie8中查看，则连展开的select下拉列表都消失了。期待大家的指教！先谢谢了！

解决方案 »

  1.   

    详细说明见以下地址：
    http://bbs.blueidea.com/viewthread.php?tid=2948186&pid=4696594&page=1&extra=page%3D1
      

  2.   


    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script language="JavaScript" type="text/javascript">
    <!--
    function showdivs(name,id,num){
    hideall(name,id,num);
    document.getElementById(name+id).style.display = "block";  //显示当前层
    }
    function hideall(name,id,num){
    for(i=1;i<num+1;i++){        
    document.getElementById(name+i).style.display = "none";   //隐藏其他层
    }
    }
    //-->
    </script>
    <style type="text/css">
    <!--
    .info02 { width:400px; text-align:center; margin:0px; padding:0px; background-color:#CCCCCC;}
    .info02 ul li { float:center; text-align:center; margin:0px; padding:0px; }
    .info02 ul li span { padding:0px; margin:0px; }
    .info03 { clear:both; width:400px; text-align:left; margin:0px; padding:0px; background-color: #FFCC33;}
    .menu01 { width:120px; text-align:left; margin:0px; padding:0px; background-color:#FF6600; display:none;}
    .menu01 ul li { font-family: 宋体, Arial; font-size: 12px; color:#434343; list-style-type: none;}
    .menu01 ul li a:link { padding:0px; margin:0px;}
    .menu01 ul li a:visited { padding:0px; margin:0px;}
    .menu01 ul li a:hover { padding:0px; margin:0px;}
    .menu01 ul li a:active { padding:0px; margin:0px;}
    -->
    </style>
    </head><body>
    <center><div class="info02">
    <span><a href="loginForm.do" target="_self" onMouseOver="showdivs('menudiv',1,3);">一级菜单1</a></span> &nbsp;&nbsp;&nbsp;
    <span><a href="loginForm.do" target="_self" onMouseOver="showdivs('menudiv',2,3);">一级菜单2</a></span>&nbsp;&nbsp;&nbsp;
    <span><a href="loginForm.do" target="_self" onMouseOver="showdivs('menudiv',3,3);">一级菜单3</a></span>
    </div><div class="info03">
    <div id="menudiv1" class="menu01" onMouseOver="showdivs('menudiv',1,3);" onMouseOut="hideall('menudiv',1,3);" style="margin-left:30px;">
      <div>
       <ul>
    <li><a href="loginForm.do" target="_blank">二级菜单一a</a></li>
    <li><a href="loginForm.do" target="_blank">二级菜单一b</a></li>
    <li><a href="loginForm.do" target="_blank">二级菜单一c</a></li>
    <li><a href="loginForm.do" target="_blank">二级菜单一d</a></li>
    <li><a href="loginForm.do" target="_blank">二级菜单一e</a></li>
       </ul>
      </div>
     </div>
     <div id="menudiv2" class="menu01" onMouseOver="showdivs('menudiv',2,3);" onMouseOut="hideall('menudiv',2,3);" style="margin-left:140px;">
      <div>
       <ul>
    <li><a href="loginForm.do" target="_blank">二级菜单二a</a></li>
    <li><a href="loginForm.do" target="_blank">二级菜单二b</a></li>
    <li><a href="loginForm.do" target="_blank">二级菜单二c</a></li>
    <li><a href="loginForm.do" target="_blank">二级菜单二d</a></li>
    <li><a href="loginForm.do" target="_blank">二级菜单二e</a></li>
       </ul>
      </div>
     </div>
     <div id="menudiv3" class="menu01" onMouseOver="showdivs('menudiv',3,3);" onMouseOut="hideall('menudiv',3,3);" style="margin-left:260px;">
      <div>
       <ul>
    <li>
    <br>
      <select name="" onChange="javascript:window.open(this.options[this.selectedIndex].value)" class="select1">
     <option value="http://www.163.com" selected="selected" >选项1a</option>
     <option value="http://www.163.com" >选项1b</option>
     <option value="http://www.163.com" >选项1c</option>
     <option value="http://www.163.com" >选项1d</option>
     <option value="http://www.163.com" >选项1e</option>
        </select>
    </li>
    <br><br>
    <li>
      <select name="" onChange="javascript:window.open(this.options[this.selectedIndex].value)" class="select1">
     <option value="http://www.163.com" selected="selected" >选项2a</option>
     <option value="http://www.163.com" >选项2b</option>
     <option value="http://www.163.com" >选项2c</option>
     <option value="http://www.163.com" >选项2d</option>
     <option value="http://www.163.com" >选项2e</option>
      </select>
      <br><br>
      </li>
       </ul>
      </div>
     </div>
    </div></center>
    </body>
    </html>
      

  3.   

    把display属性换成style.visibility="hidden"; 
    style.visibility="visible";
      

  4.   

    SELECT 这个HTML标签比较特殊，以下为解决方案：
    <iframe id="maskFrm" style="position:absolute;z-index:550;width:expression(this.nextSibling.offsetWidth);height:expression(this.nextSibling.offsetHeight);top:expression(this.nextSibling.offsetTop);left:expression(this.nextSibling.offsetLeft);" frameborder="0"></iframe>
    <div id="treeView" style="position:absolute;z-index:600;background-color:#f7fafc;margin:0px;padding:0px;border:0px dashed #dae9f3; overflow:hidden;width:380px;height:480px;display:none;">遮罩层</div>
    原理：DIV不能盖住SELECT，而IFRAME能盖住SELECT。
      

  5.   

    把display属性换成 
    style.visibility="hidden"; 
    style.visibility="visible";这样做还是不行。
      

  6.   

    yali198：
    我的这个问题不是“DIV不能盖住SELECT”的问题，而是滑过下拉列表后触发了要滑出层才触发的onMouseOut动作。
      

  7.   

    你把size设置一下，还有你显示这个的时候，前一个隐藏了没有
      

  8.   

    非chrome下<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script language="JavaScript" type="text/javascript">
    <!--
    function showdivs(name,id,num){
    hideall(name,id,num);
    document.getElementById(name+id).style.display = "block";  //显示当前层
    }
    function hideall(name,id,num){
    if(event.srcElement){
    if(id==3&&(document.activeElement.id=="Select1"||document.activeElement.id=="Select2")) num=2
    }else{
       if(id==3&&(event.explicitOriginalTarget.id=="Select1"||event.explicitOriginalTarget.id=="Select2")) num=2
    }
    for(i=1;i<num+1;i++){        
    document.getElementById(name+i).style.display = "none";   //隐藏其他层
    }
    }
    //-->
    </script>
    <style type="text/css">
    <!--
    .info02 { width:400px; text-align:center; margin:0px; padding:0px; background-color:#CCCCCC;}
    .info02 ul li { float:center; text-align:center; margin:0px; padding:0px; }
    .info02 ul li span { padding:0px; margin:0px; }
    .info03 { clear:both; width:400px; text-align:left; margin:0px; padding:0px; background-color: #FFCC33;}
    .menu01 { width:120px; text-align:left; margin:0px; padding:0px; background-color:#FF6600; display:none;}
    .menu01 ul li {    font-family: 宋体, Arial; font-size: 12px; color:#434343;    list-style-type: none;}
    .menu01 ul li a:link { padding:0px; margin:0px;}
    .menu01 ul li a:visited { padding:0px; margin:0px;}
    .menu01 ul li a:hover { padding:0px; margin:0px;}
    .menu01 ul li a:active { padding:0px; margin:0px;}
    -->
    </style>
    </head><body>
    <center><div class="info02">
    <span><a href="loginForm.do" target="_self" onMouseOver="showdivs('menudiv',1,3);">一级菜单1</a></span> &nbsp;&nbsp;&nbsp;
    <span><a href="loginForm.do" target="_self" onMouseOver="showdivs('menudiv',2,3);">一级菜单2</a></span>&nbsp;&nbsp;&nbsp;
    <span><a href="loginForm.do" target="_self" onMouseOver="showdivs('menudiv',3,3);">一级菜单3</a></span>
    </div><div class="info03">
        <div id="menudiv1" class="menu01" onMouseOver="showdivs('menudiv',1,3);" onMouseOut="hideall('menudiv',1,3);" style="margin-left:30px;">
          <div>
           <ul>
            <li><a href="loginForm.do" target="_blank">二级菜单一a</a></li>
            <li><a href="loginForm.do" target="_blank">二级菜单一b</a></li>
            <li><a href="loginForm.do" target="_blank">二级菜单一c</a></li>
            <li><a href="loginForm.do" target="_blank">二级菜单一d</a></li>
            <li><a href="loginForm.do" target="_blank">二级菜单一e</a></li>
           </ul>
          </div>
         </div>
         <div id="menudiv2" class="menu01" onMouseOver="showdivs('menudiv',2,3);" onMouseOut="hideall('menudiv',2,3);" style="margin-left:140px;">
          <div>
           <ul>
            <li><a href="loginForm.do" target="_blank">二级菜单二a</a></li>
            <li><a href="loginForm.do" target="_blank">二级菜单二b</a></li>
            <li><a href="loginForm.do" target="_blank">二级菜单二c</a></li>
            <li><a href="loginForm.do" target="_blank">二级菜单二d</a></li>
            <li><a href="loginForm.do" target="_blank">二级菜单二e</a></li>
           </ul>
          </div>
         </div>
         <div id="menudiv3" class="menu01" onMouseOver="showdivs('menudiv',3,3);" onMouseOut="hideall('menudiv',3,3);" style="margin-left:260px;">
          <div>
           <ul>
            <li>
            <br>
              <select name="" onChange="javascript:window.open(this.options[this.selectedIndex].value)" class="select1" ID="Select1"  >
                     <option value="http://www.163.com" selected="selected" >选项1a</option>
                     <option value="http://www.163.com" >选项1b</option>
                     <option value="http://www.163.com" >选项1c</option>
                     <option value="http://www.163.com" >选项1d</option>
                     <option value="http://www.163.com" >选项1e</option>
                </select>
            </li>
            <br><br>
            <li>                
                  <select name="" onChange="javascript:window.open(this.options[this.selectedIndex].value)" class="select1" ID="Select2">
                     <option value="http://www.163.com" selected="selected" >选项2a</option>
                     <option value="http://www.163.com" >选项2b</option>
                     <option value="http://www.163.com" >选项2c</option>
                     <option value="http://www.163.com" >选项2d</option>
                     <option value="http://www.163.com" >选项2e</option>
                  </select>
              <br><br>
              </li>    
           </ul>
          </div>
         </div>
    </div></center>
    </body>
    </html>
      

  9.   

    function showdivs(name,id,num){
    hideall(name,id,num);
    document.getElementById(name+id).style.display = "block";  //显示当前层
    }这个hideall多余了吧？你不是对每个控件做了onMouseOut处理吗？
      

  10.   

    感谢BeenZ，按照你的做法可以了，但是在Firefox中就不能显示二级菜单层了，能不能再帮忙修改一下？
      

  11.   

    好了<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script language="JavaScript" type="text/javascript">
    <!--
    function showdivs(e,name,id,num){
    hideall(e,name,id,num);
    document.getElementById(name+id).style.display = "block";  //显示当前层
    }
    function hideall(e,name,id,num){
    if(window.event){
        if(id==3&&(document.activeElement.id=="Select1"||document.activeElement.id=="Select2")) num=2
    }else{
       if(id==3&&(e.explicitOriginalTarget.id=="Select1"||e.explicitOriginalTarget.id=="Select2")) num=2
    }
    for(i=1;i<num+1;i++){        
    document.getElementById(name+i).style.display = "none";   //隐藏其他层
    }
    }
    //-->
    </script>
    <style type="text/css">
    <!--
    .info02 { width:400px; text-align:center; margin:0px; padding:0px; background-color:#CCCCCC;}
    .info02 ul li { float:center; text-align:center; margin:0px; padding:0px; }
    .info02 ul li span { padding:0px; margin:0px; }
    .info03 { clear:both; width:400px; text-align:left; margin:0px; padding:0px; background-color: #FFCC33;}
    .menu01 { width:120px; text-align:left; margin:0px; padding:0px; background-color:#FF6600; display:none;}
    .menu01 ul li {    font-family: 宋体, Arial; font-size: 12px; color:#434343;    list-style-type: none;}
    .menu01 ul li a:link { padding:0px; margin:0px;}
    .menu01 ul li a:visited { padding:0px; margin:0px;}
    .menu01 ul li a:hover { padding:0px; margin:0px;}
    .menu01 ul li a:active { padding:0px; margin:0px;}
    -->
    </style>
    </head><body>
    <center><div class="info02">
    <span><a href="loginForm.do" target="_self" onMouseOver="showdivs(event,'menudiv',1,3);">一级菜单1</a></span> &nbsp;&nbsp;&nbsp;
    <span><a href="loginForm.do" target="_self" onMouseOver="showdivs(event,'menudiv',2,3);">一级菜单2</a></span>&nbsp;&nbsp;&nbsp;
    <span><a href="loginForm.do" target="_self" onMouseOver="showdivs(event,'menudiv',3,3);">一级菜单3</a></span>
    </div><div class="info03">
        <div id="menudiv1" class="menu01" onMouseOver="showdivs(event,'menudiv',1,3);" onMouseOut="hideall(event,'menudiv',1,3);" style="margin-left:30px;">
          <div>
           <ul>
            <li><a href="loginForm.do" target="_blank">二级菜单一a</a></li>
            <li><a href="loginForm.do" target="_blank">二级菜单一b</a></li>
            <li><a href="loginForm.do" target="_blank">二级菜单一c</a></li>
            <li><a href="loginForm.do" target="_blank">二级菜单一d</a></li>
            <li><a href="loginForm.do" target="_blank">二级菜单一e</a></li>
           </ul>
          </div>
         </div>
         <div id="menudiv2" class="menu01" onMouseOver="showdivs(event,'menudiv',2,3);" onMouseOut="hideall(event,'menudiv',2,3);" style="margin-left:140px;">
          <div>
           <ul>
            <li><a href="loginForm.do" target="_blank">二级菜单二a</a></li>
            <li><a href="loginForm.do" target="_blank">二级菜单二b</a></li>
            <li><a href="loginForm.do" target="_blank">二级菜单二c</a></li>
            <li><a href="loginForm.do" target="_blank">二级菜单二d</a></li>
            <li><a href="loginForm.do" target="_blank">二级菜单二e</a></li>
           </ul>
          </div>
         </div>
         <div id="menudiv3" class="menu01" onMouseOver="showdivs(event,'menudiv',3,3);" onMouseOut="hideall(event,'menudiv',3,3);" style="margin-left:260px;">
          <div>
           <ul>
            <li>
            <br>
              <select name="" onChange="javascript:window.open(this.options[this.selectedIndex].value)" class="select1" ID="Select1"  >
                     <option value="http://www.163.com" selected="selected" >选项1a</option>
                     <option value="http://www.163.com" >选项1b</option>
                     <option value="http://www.163.com" >选项1c</option>
                     <option value="http://www.163.com" >选项1d</option>
                     <option value="http://www.163.com" >选项1e</option>
                </select>
            </li>
            <br><br>
            <li>                
                  <select name="" onChange="javascript:window.open(this.options[this.selectedIndex].value)" class="select1" ID="Select2">
                     <option value="http://www.163.com" selected="selected" >选项2a</option>
                     <option value="http://www.163.com" >选项2b</option>
                     <option value="http://www.163.com" >选项2c</option>
                     <option value="http://www.163.com" >选项2d</option>
                     <option value="http://www.163.com" >选项2e</option>
                  </select>
              <br><br>
              </li>    
           </ul>
          </div>
         </div>
    </div></center>
    </body>
    </html>