css - nowrap テキストの後に ul の幅が増えない

Question

サブメニューを作成しようとしていますが、li に white-space:nowrap がある場合、ul 幅がそれを無視し、テキストのオーバーフローを引き起こしています。(ul width は、テキストをラップするために増加しません)
誰でもこれを修正する方法を知っていますか?

編集。表示プロパティを可視性に変更すると、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;
}