CSS 배치 된 컨테이너 요소에서 열이 튀음

Question

하위 메뉴가 상위 메뉴의 높이에 맞는 다중 열인 드롭 다운 메뉴를 작성하려고합니다. 나는 코드가해야한다고 생각하는 방법 당신은 현대적인 브라우저에있는 경우

여기에,하지만 아이템이 드롭 다운 바깥쪽으로

$("#menu-button").click(function(event){ 
 
    event.preventDefault(); 
 
    $("#menu").toggleClass("show"); 
 
})

.bar { width:50%; margin:0 auto; padding:5px 10px; background:black; color:white; text-align:left; position:relative; } 
 

 
#menu { /*display:none;*/ } 
 
#menu.show { display:block } 
 
#menu-button { background:transparent; border:1px solid white; color:inherit; } 
 

 
#menu { position:absolute; top:100%; right:left; background:silver; color:black; text-align:left; } 
 
#menu a { color:inherit; text-decoration:none; } 
 
#menu li:hover { background-color:#333; } 
 

 
#menu ul { list-style:none; padding:0; margin:0; position:relative; } 
 
#menu ul>li { padding:3px 10px; width:80px; } 
 
#menu li ul { /*display:none;*/ background:gray; border:1px solid lime; position:absolute; top:0; bottom:0; left:100%; column-width:100px; -webkit-column-width:100px; } 
 
#menu li ul li { display:inline-block; } 
 

 
/*#menu li:hover ul { display:block; }*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="bar"> 
 
    <button id="menu-button">Menu</button> 
 
    <div id="menu"> 
 
    <ul class="menu"> 
 
    <li><a href="#">Item 1</a></li> 
 
    <li class="dropdown"><a href="#">Item 2 &gt;</a> 
 
     <ul> 
 
     <li><a href="#">Item 2.1</a></li> 
 
     <li><a href="#">Item 2.2</a></li> 
 
     <li><a href="#">Item 2.3</a></li> 
 
     <li><a href="#">Item 2.4</a></li> 
 
     <li><a href="#">Item 2.5</a></li> 
 
     <li><a href="#">Item 2.6</a></li> 
 
     <li><a href="#">Item 2.7</a></li> 
 
     <li><a href="#">Item 2.8</a></li> 
 
     <li><a href="#">Item 2.9</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Item 3</a></li> 
 
    <li><a href="#">Item 4</a></li> 
 
    <li><a href="#">Item 5</a></li> 
 
    </ul> 
 
    </div> 
 
</div>

모두 그 위에 확장하지 않습니다, Javascript를 추가하여 요소의 scrollWidth에 하위 메뉴의 크기를 조정하려고 시도했지만 Chrome은 적절한 시간에 scrollWidth를 계산하지 못하는 것 같습니다. 때로는 0을, 때로는 한 열의 너비를, 때로는 두 열이어야하는 경우에만 세 열의 너비를 반환합니다.

Answer 1

$("#menu-button").click(function(event){ 
 
    event.preventDefault(); 
 
    $("#menu").toggleClass("show"); 
 
})

.bar { width:50%; margin:0 auto; padding:5px 10px; background:black; color:white; text-align:left; position:relative; } 
 

 
#menu { /*display:none;*/ } 
 
#menu.show { display:block } 
 
#menu-button { background:transparent; border:1px solid white; color:inherit; } 
 

 
#menu { position:absolute; top:100%; right:left; background:silver; color:black; text-align:left; } 
 
#menu a { color:inherit; text-decoration:none; } 
 
#menu li:hover { background-color:#333; } 
 

 
#menu ul { list-style:none; padding:0; margin:0; position:relative; } 
 
#menu ul>li { padding:3px 10px; width:80px; } 
 
#menu li ul { /*display:none;*/ background:gray; border:1px solid lime; position:absolute; top:0; bottom:0; left:100%; column-width:100px; -webkit-column-width:100px; } 
 
#menu li ul li { display:inline-block; } 
 

 
/*#menu li:hover ul { display:block; }*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="bar"> 
 
    <button id="menu-button">Menu</button> 
 
    <div id="menu"> 
 
    <ul class="menu"> 
 
    <li><a href="#">Item 1</a></li> 
 
    <li class="dropdown"><a href="#">Item 2 &gt;</a> 
 
     <ul> 
 
     <li><a href="#">Item 2.1</a></li> 
 
     <li><a href="#">Item 2.2</a></li> 
 
     <li><a href="#">Item 2.3</a></li> 
 
     <li><a href="#">Item 2.4</a></li> 
 
     <li><a href="#">Item 2.5</a></li> 
 
     <li><a href="#">Item 2.6</a></li> 
 
     <li><a href="#">Item 2.7</a></li> 
 
     <li><a href="#">Item 2.8</a></li> 
 
     <li><a href="#">Item 2.9</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Item 3</a></li> 
 
    <li><a href="#">Item 4</a></li> 
 
    <li><a href="#">Item 5</a></li> 
 
    </ul> 
 
    </div> 
 
</div>