CSS Chrome not updating center position when using position: fixed;

Could not really find a good title for this question...

Problem: When resizing the browser window, the menu position is not updated in Chrome, UNTIL you hover with the mouse over. In Firefox there is no problem at all.

I've made a simple fiddle http://jsfiddle.net/fHcw7/

If replacing 'position fixed' to 'position relative' there is no problem in Chrome

Html

<div id="main">
        <div id="div_top" class="menu">     
            <nav>
                <ul>
                    <li>
                        <a href="#">HELLO</a>
                    </li>

                    <li>
                        <a href="#">WORLD</a>
                    </li>

                    <li>
                        <a href="index.html">BANANA</a>
                    </li>
                </ul>
            </nav>
        </div>
</div>

CSS

#main 
{
    height: 175%;
    width: 100%;
    border: solid red 1px;
    position: absolute; top: 0; left: 0;        
    overflow: hidden;
    background-color: #333;
}

#div_top
{
    width: 100%;
    height: 100px;
    margin-top: 20px;
    position: fixed;
    border: solid yellow 1px;

    text-align: center;
    font-size: 18px;
    font-weight: bold; 
    color: #fff;
    z-index: 100;
}

.menu a:link
{   
    color: #fff; 
    text-decoration: none;

}
.menu a:visited
{   
    color: #fff; 
    text-decoration: none;
}
.menu  a:hover
{ 
    background-color: rgba(100, 50, 0, 0.4);
    border-radius: 5px;
    border: solid white 2px;
    margin: -2px;
}
.menu a:active
{ 
    color: #fdd;
}
.menu ul
{
    list-style-type: none;  
    margin: 0px;
    padding: 0px;
    text-align: center;
}
.menu li
{
    display: inline;
    margin: 20px;   
}