ul is not increasing width after nowrap text

Question

I am trying to create a submenu but when li has white-space:nowrap, the ul width ignores it and is causing overflowing of the text. (ul width is not increased to wrap the text)
Anyone knows a way to fix this?

Edit. If I change display property to visibility it seems to fix the problem on Chrome but it persists on 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

It is a problem with your padding:

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

try doing this instead:

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