Border-radius changing in Chrome

Question

When I use border-radius on DIV that is wrapping UL, after hovering the links inside UL, I'm losing the radius in Chrome.

<div class="menu">
<div class="middle">
    <ul class="bmenu">
        <li><a href="#home"/>Home</a></li>
        <li><a href="#cv"/>CV</a></li>
        <li><a href="#projects"/>Projects</a></li>
        <li><a href="#contact"/>Contact</a></li>
    </ul>
</div>
</div>

Here is the example: http://jsfiddle.net/TYgP6/

Can anyone help?

Answer 1

.bmenu{
    padding: 0px;
    margin: 0 0 10px 0;
    width:100%; 
height:60px;    
    color:#000;
    border-top-left-radius: 10px;   
    border-top-right-radius: 10px;  

}
try this code replacing yours.you gave position relative to .bmenu which you need to remove.

Answer 2

Prefix the CSS property for Webkit - -webkit-border-radius:10px 10px 0 0; - that should solve it.

Answer 3

under bmenu class, you have to remove position:relative.

.bmenu{/*position:relative;*/}

I have updated the same here . You can have a look. Hope this helps.