선택 옵션 선택 드롭 다운 메뉴 열기

Question

드롭 다운 메뉴와 드롭 다운 메뉴 바로 아래에 드롭 다운 메뉴가 있습니다.

문제는 양식에서 드롭 다운을 열고 첫 번째 옵션 ("1")을 선택하면 메뉴가 자동으로 열립니다.

<br>을 사용하거나 양식 div에 일부 여백을 넣으면이 일이 발생하지 않으므로 양식과 메뉴의 근접성과 관련이 있다고 생각하지만 무슨 일이 일어나고 있는지.

#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

이는 크롬 (? 깜박임) 관련 버그 : 여기

의 (a jsfiddle 대체 용) 무슨 일이 일어나고 있는지의 exemple입니다. Chrome은 커서 위치에서 메뉴 호버 상태를 "재설정"하려고합니다. (jQuery로)

자바 스크립트 :이 더러운 솔루션을 시도 할 수 있습니다

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

을 그리고 당신의 CSS에서 :

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

이는 "복원에서 메뉴 표시를 보호 할 것 방법".

난 당신이

This JSFiddle이 원본과 고정 된 버전을 보여줍니다 Chromium Issues site

업데이트에이 버그를보고하는 것이 좋습니다. 데비안 7.6에서 Chrome 35.0.1916.153에서 테스트되었습니다.

Answer 2

이 문제에 해당되면 HTML select triggers css:hover on select 나는이 솔루션이 유용 할 수 있습니다. 1 줄의 js 만 있으면됩니다.

$(".form select").on("change", function(){$("#nav ul").hide(); $(".form form").submit();}); 

사례에 따라 숨기기 선택기를 추가 할 수 있습니다.