CSS Chrome does not update center position when using position: fixed;

Question

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

Problem. When you resize the browser window, the menu position is not updated in Chrome if you hover over the mouse. There are no problems in Firefox.

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

If you replace "position fixed" with "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;   
}

Answer 1

, li.
.
, .
http://jsfiddle.net/notme/FA8TN/

.menu li

    {
        display: inline-block;
        margin: 20px;   
    }