css - nowrap 文本后 ul 不增加宽度

Question

我正在尝试创建一个子菜单，但是当 li 有空格：nowrap 时，ul 宽度会忽略它并导致文本溢出。（ul 宽度不会增加以包裹文本）
有人知道解决这个问题的方法吗？

编辑。如果我将显示属性更改为可见性，它似乎可以解决 Chrome 上的问题，但它仍然存在于 ie 上。

** 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;
}