如何讓子菜單包裝horozontal沒有指定寬度

Question

我試圖保持代碼爲最小，所以我創建了一個子菜單，它將根據.sub_menu中LI的數量進行擴展和縮小，例如，如果只有5李或10它會圍繞它們留下5px的邊緣，即使它沒有寬度屬性。但是，當我將它插入主導航時，它停止工作。
無論有多少人，我怎樣才能讓子菜單div環繞LI？

​​

和這裏的時候sub_menu插入菜單它停止工作

#navagation{ 
 
float:left; 
 
width:70%; 
 
height:100%; 
 
margin:0; 
 
padding:0; 
 
} 
 
#btmenu{ 
 
position:relative; 
 
width:100%; 
 
list-style: none; 
 
margin:0; 
 
padding:0; 
 
height:62px;text-align:center; 
 
} 
 
ul#btmenu li{ \t 
 
padding:0; 
 
margin:0; 
 
display: inline; 
 
height:62px; 
 
width:200px; 
 

 
} 
 
#btmenu li > a{ \t height:62px; 
 
line-height:62px; 
 
margin-left:1%; 
 
margin-right:1%; 
 
text-align:center; 
 
display:inline-block; 
 
text-decoration:none; 
 
font-weight:bold; 
 
font-size:15px; 
 
color:#000; 
 
padding-left:1%; 
 
padding-right:1%; 
 
text-transform:uppercase; 
 
vertical-align: middle; 
 
} 
 
#btmenu > li > a:hover{ 
 
background-color:#000; 
 
color:#FFF; \t 
 
} 
 
.sub_menu{ 
 
display:none; 
 
} 
 
#btmenu .sub_menu li{ \t 
 
} 
 
.sub_menu li a{display:block; 
 
background-color:#F00; 
 
height:100px; 
 
width:100px;margin:10px; 
 
text-decoration:none; 
 
color:#FFF; 
 
} 
 
#btmenu > li:hover .sub_menu{ 
 
display:block;/*no need for height or width using inline block intill i insert submenu into main menu*/ 
 
position:absolute; 
 
background-color:#666; 
 
border: 1px solid red; 
 
list-style: none; 
 
margin:0; 
 
padding:0; 
 
white-space:nowrap; 
 
}

<div id="navagation"> 
 
<ul id="btmenu"> 
 

 

 

 
<li class="top_quote"> 
 
    <a href="services">services</a> 
 
    <ul class="sub_menu"> 
 
    <li class="auto body repair"><a href="#">1</a></li> 
 
    <li class="rental & loaner"><a href="#">2</a></li> 
 
    <li class="hail damage repair"><a href="#">3</a></li> 
 
    <li class="towing"><a href="#">4</a></li> 
 
    <li class="glass repair"><a href="#">5</a></li> 
 
    </ul></li> 
 

 
<li class="top_quote"><a href="locations">locations</a> 
 
<ul class="sub_menu"> 
 
    <li class="auto body repair"><a href="#">1</a></li> 
 
    <li class="rental & loaner"><a href="#">2</a></li> 
 
    <li class="hail damage repair"><a href="#">3</a></li> 
 
    <li class="towing"><a href="#">4</a></li> 
 
    <li class="glass repair"><a href="#">5</a></li> 
 
    <li class="glass repair"><a href="#">6</a></li> 
 
    <li class="glass repair"><a href="#">7</a></li> 
 
    </ul></li> 
 
<li class="top_quote"><a href="partners">partners</a> 
 
<ul class="sub_menu"> 
 
    <li class="auto body repair"><a href="#">1</a></li> 
 
    <li class="rental & loaner"><a href="#">2</a></li> 
 
    <li class="hail damage repair"><a href="#">3</a></li> 
 
    <li class="towing"><a href="#">4</a></li> 
 
    <li class="glass repair"><a href="#">5</a></li> 
 
    <li class="glass repair"><a href="#">6</a></li> 
 
    <li class="glass repair"><a href="#">7</a></li> 
 
    </ul></li> 
 
<li class="top_quote"><a href="our work">our work</a></li> 
 
<li class="top_quote"><a href="contact">contact</a></li> 
 

 

 

 

 
</ul> 
 
</div><!--navagation--

Answer 1

我認爲你的問題（你監督的）是，從你的btmenu你的子菜單裏的繼承李的。

我已經創建瞭解決您的問題的jsfiddle（我想，這是你想要的）：https://jsfiddle.net/jn6xfx4c/

的代碼需要：

ul#btmenu .sub_menu li { 
    display: inline-block; 
    height: auto; 
} 

Answer 2

的使用li數量需要更多的寬度比你自己的導航容器，所以你需要從#btmenu > li:hover .sub_menu刪除white-space:nowrap;你有你的CSS，否則，如果你需要他們在同一行，所以你將有水平滾動添加overflow:auto;，同時保持white-space:nowrap;