CSS列吹出定位的容器元素

Question

我想建立一個下拉菜單，其中子菜單是適合父菜單高度的多列。

以下是我認爲的代碼應該是，如果你是在一個現代的瀏覽器，但第2項下拉菜單不向外擴張

$("#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，有時是一列的寬度，有時是3列的寬度，當它只有兩個時。

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>