Auswahl auswählen Option Öffnet das Dropdown-Menü

Question

Ich verwende ein Dropdown-Menü und ein Formular mit einem Dropdown-Menü darunter.

Das Problem ist, dass, wenn ich das Dropdown im Formular öffne und die erste Option ("1") wähle das Menü automatisch öffnet.

Wenn ich etwas <br> benutze oder etwas Rand oben in der Form div platziere, passiert das nicht, also denke ich, dass es etwas mit der Nähe des Menüs zum Formular zu tun hat, aber ich kann es nicht erraten was passiert. Hier

ist ein exemple dessen, was geschieht (alternativ als jsfiddle):

#menu { 
 
     position: relative; 
 
     z-index: 1; 
 
     clear: both; 
 
    } 
 

 
    #nav{ 
 
     height: 39px; 
 
     font: 14px Arial,Verdana,sans-serif; 
 
     background: #f8f8f8; 
 
     border: 1px solid #DDDDDD; 
 
     border-radius: 3px; 
 
     min-width:500px; 
 
     margin-left: 0px; 
 
     padding-left: 0px; 
 
    } 
 

 
    #nav li{ 
 
     list-style: none; 
 
     display: block; 
 
     float: left; 
 
     height: 40px; 
 
     position: relative; 
 
     border-right: 1px solid #DDDDDD; 
 
    } 
 

 
    #nav li a{ 
 
     padding: 0px 30px 0px 30px; 
 
     margin: 0px 0; 
 
     line-height: 40px; 
 
     text-decoration: none; 
 
     border-right: 1px solid #DDDDDD; 
 
     height: 40px; 
 
     color: #6791AD; 
 
     font-weight: bold; 
 
    } 
 

 
    #nav ul{ 
 
     background: #f2f5f6; 
 
     padding: 0px; 
 
     border-bottom: 1px solid #DDDDDD; 
 
     border-right: 1px solid #DDDDDD; 
 
     border-left:1px solid #DDDDDD; 
 
     border-radius: 0px 0px 3px 3px; 
 
     box-shadow: 2px 2px 3px #ECECEC; 
 
     -webkit-box-shadow: 2px 2px 3px #ECECEC; 
 
     -moz-box-shadow:2px 2px 3px #ECECEC; 
 
     width:200px; 
 
    } 
 

 
    #nav li:hover{ 
 
     background: white; 
 
    } 
 
    #nav li a{ 
 
     display: block; 
 
    } 
 
    #nav ul li { 
 
     border-right:none; 
 
     border-bottom:1px solid #DDDDDD; 
 
     width:200px; 
 
     height:39px; 
 
    } 
 

 
    #nav ul li li { 
 
     background: #f2f5f6; 
 
     padding: 0px; 
 
     border-bottom: 1px solid #DDDDDD; 
 
     border-right: 1px solid #DDDDDD; 
 
     border-left:1px solid #DDDDDD; 
 
     border-radius: 0px 0px 3px 3px; 
 
     box-shadow: 2px 2px 3px #ECECEC; 
 
     -webkit-box-shadow: 2px 2px 3px #ECECEC; 
 
     -moz-box-shadow:2px 2px 3px #ECECEC; 
 
     width:200px; 
 
    } 
 

 
    #nav ul li ul { 
 
     background: #f2f5f6; 
 
     padding: 0px; 
 
     border-bottom: 1px solid #DDDDDD; 
 
     border-right: 1px solid #DDDDDD; 
 
     border-left:1px solid #DDDDDD; 
 
     border-radius: 0px 0px 3px 3px; 
 
     box-shadow: 2px 2px 3px #ECECEC; 
 
     -webkit-box-shadow: 2px 2px 3px #ECECEC; 
 
     -moz-box-shadow:2px 2px 3px #ECECEC; 
 
     width:200px; 
 
    } 
 

 
    #nav ul li a { 
 
     border-right: none; 
 
     color:#6791AD; 
 
     text-shadow: 1px 1px 1px #FFF; 
 
     border-bottom:1px solid #FFFFFF; 
 
    } 
 
    #nav ul li:hover{background:#DFEEF0;} 
 
    #nav ul li:last-child { border-bottom: none;} 
 
    #nav ul li:last-child a{ border-bottom: none;} 
 
    /* Sub menus */ 
 
    #nav ul{ 
 
     display: none; 
 
     visibility:hidden; 
 
     position: absolute; 
 
     top: 40px; 
 
    } 
 

 
    /* Third-level menus */ 
 
    #nav ul ul{ 
 
     top: 0px; 
 
     left:200px; 
 
     display: none; 
 
     visibility:hidden; 
 
     border: 1px solid #DDDDDD; 
 
    } 
 
    /* Fourth-level menus */ 
 
    #nav ul ul ul{ 
 
     top: 0px; 
 
     left:170px; 
 
     display: none; 
 
     visibility:hidden; 
 
     border: 1px solid #DDDDDD; 
 
    } 
 

 
    #nav ul li{ 
 
     display: block; 
 
     visibility:visible; 
 
    } 
 
    #nav li:hover > ul{ 
 
     display: block; 
 
     visibility:visible; 
 
    }

<div id='menu'> 
 
    <ul id='nav'> 
 
     <li> 
 
      <a href='#'>Level 1</a> 
 
      <ul> 
 
       <li><a href='#'>Level 1-1</a> 
 
        <ul> 
 
         <li><a href='#'>Level 1-1-1</a></li> 
 
         <li><a href='#'>Level 1-1-2</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href='#'>Level 1-2</a> 
 
        <ul> 
 
         <li><a href='#'>Level 1-2-1</a></li> 
 
         <li><a href='#'>Level 1-2-2</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href='#'>Level 1-3</a> 
 
        <ul> 
 
         <li><a href='#'>Level 1-3-1</a></li> 
 
         <li><a href='#'>Level 1-3-2</a></li> 
 
        </ul> 
 
       </li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</div> 
 
<div class='form'> 
 
    <form> 
 
     <select> 
 
      <option selected='true'> 1 </option> 
 
      <option> 2 </option> 
 
      <option> 3 </option> 
 
     </select> 
 
     <input type='button' value="Go"/> 
 
    </form> 
 
</div> \t

Answer 1

Dies ist ein Chrome (Blink?) Bezogen Fehler. Chrome versucht, den Hover-Status des Menüs an der Cursorposition zu "zurücksetzen". Sie können diese schmutzige Lösung versuchen:

Javascript (mit JQuery):

$(function(){ 
    $("select").click(function(){ 
     $("body").addClass("select-activated"); 
     setTimeout(function(){ 
      $("body").removeClass("select-activated"); 
     }, 200); 
    }); 
}); 

Und in Ihrem CSS:

body.select-activated #nav ul { 
    display: none; 
} 

Dies wird die Menüanzeige aus der „Wiederherstellung schützen verarbeiten".

Ich schlage vor, Sie diesen Fehler zu berichten über die Chromium Issues site

aktualisieren

This JSFiddle das Original und eine feste Version zeigt. Getestet in Chrome 35.0.1916.153 unter Debian 7.6.

Answer 2

Nachdem ich in diese Ausgabe HTML select triggers css:hover on select gegangen bin, habe ich diese Lösung vorzuschlagen, die auch hier nützlich sein könnte. es erfordert nur eine Zeile von js:

Sie können ausblenden Selektor nach Ihrem Fall hinzufügen.