overflow:hidden property isn't workingwith chrome

[Pmollman]

I just started working on a website (im pretty new to html and css) and i created a basic navigation bar. The navigation bar has border-radius property to round the bottom corners of the bar, but when the text boxes change color when hovering over them, they make the text box visable, being a rectangle it defeats the porpose of the rounded corners. So i used overflow:hidden to cut the rectanle off when i hover over the text. this works fine with firefox, but in chrome it still shows the full text box, making for an undesirable look and feel. Is there a way I can fix this? Or should I do it an entirley differant way? I am working in one PHP file at first then optimizing it by making actual CSS files later. so all the code is together, for now.

`

    body {
    margin:0;
    padding:0;
    }

    .banner {
    top: 80px;
    width: 1000px;
    height: 400px;
    margin: 0px;
    padding: 0;
    overflow:hidden;
    position:relative;
    border-top-left-radius:20px;
    border-top-right-radius:20px;
    }

    .navbar {
    top:80px;
    position:relative;
    width:1000px;
    height:40px;
    background-color:#44A6A1;
    margin:0;
    padding:0;
    list-style-type:none;
    text-align:center;
    border-bottom-left-radius:20px;
    border-bottom-right-radius:20px;
    overflow:hidden;
    }

    .navbar li {
    float:left;
    z-index:100;
    }

    .navbar li a {
    padding-top:10px;
    padding-bottom:10px;
    height:40px;
    color:#FFFFFF
    }

    a:link,a:visited {
    display:block;
    width:200px;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
    }

    a:hover,a:active {
    background-color:#55CFC8;
    color:#2E6E6A;
    }

    .navbar li a:hover {
    color:#2E6E6A;
    }

</style>

• Home
• Blog
• Gallery
• Game Stuff
• About

`

The site im working on http://theshadowview.x10host.com/

Thanks to anyone who can help.

[Author]

Posts