ul不是在nowrap文本後增加寬度

Question

我想創建一個子菜單，但是當li有空格：nowrap時，ul寬度會忽略它並導致文本溢出。 （ul寬度不增加以包裝文字）
任何人都知道一種方法來解決這個問題？

編輯。如果我將顯示屬性更改爲可見性，它似乎可以解決Chrome上的問題，但它仍然存在。

** jsFiddle **

HTML

<ul id="menubar"> 
    <li>File 
     <ul class="submenu"> 
      <li>Save as file</li> 
      <li>Save as file2</li> 
      <hr /> 
      <li>Save simple design</li> 
      <li>Save complete design</li> 
     </ul> 
    </li> 
</ul> 

CSS

html,body{height:100%;width:100%;margin:0;padding:0;} 
#menubar { 
    background: gray; 
    height:15%; 
    margin:0; 
    padding:0; 
    width:100%; 
} 
#menubar > li { 
    height:100%; 
    float:left; 
    padding:0 2% !important; 
    display: inline-flex; 
    align-items: center; 
} 
#menubar li:hover { 
    background-color:#7faddb; 
} 
#menubar li:hover ul.submenu { 
    display:block; 
} 
#menubar ul.submenu { 
    z-index:99; 
    border:1px solid black; 
    background-color:white; 
    padding:.3%; 
    position: absolute; 
    display:none; 
} 
#menubar ul.submenu li { 
    list-style-type: none; 
    font-size:110%; 
    padding:0 5%; 
    white-space:nowrap; 
} 

Answer 1

它與您的填充一個問題：

http://jsfiddle.net/MaRF5/6/

儘量不要做這樣的：

#menubar ul.submenu { 
    z-index:99; 
    border:1px solid black; 
    background-color:white; 
    padding:.3%; 
    position:absolute; 
} 
#menubar ul.submenu li { 
    list-style-type: none; 
    font-size:110%; 
     padding:10px; 
}