Hover Nav

Hi,
if you see in my forum (http://zanimanga.italians.tv/) the nav menù has a strange effect when is "hover" and it doesnt look very good. I would like to have a cool effect when the nav is "hover" that change the actual nav.

Here the CSS code i have now, i don't know how to change it:

Code:

#pun-head #pun-navlinks {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    left: 0;
    padding: 0.5em 1.1em 0.6em;
    position: absolute;
    right: 0;
    top: 100px;

    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15), 1px 0 0 rgba(255, 255, 255, 0.08) inset, -1px 0 0 rgba(255, 255, 255, 0.03) inset;
    border-bottom: 4px solid #528cbc;
}

#pun-navlinks li {
    display: inline;
    font-size: 5.80em;
}
#pun-navlinks li a {
    margin: 0 0.0em 0 0;
    top: 6px;
    color: white;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
    left: 110px;
    position: relative;
    padding: 8px;
}
#pun-navlinks a, #pun-navlinks a:visited {
    text-decoration: none;
}

#pun-navlinks a:active, #pun-navlinks a:focus, #pun-navlinks a:hover {
    text-decoration: none;
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.04);

Thanks

I do not see any effect.  Could you post screenshots of it?

This is normal:





This is Hover (forum nav)

Do you mean the green button?

No the "forum" nav button, look at it...it appears a strange transparent square

Code:

#pun-navlinks a:active, #pun-navlinks a:focus, #pun-navlinks a:hover {
    text-decoration: none;
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.04

Remove the last line.

Yes i know, but i would like to change it with a nice effect...do you know any?

What would you like?

Something that illuminate the nav when is hover...that works for every browser.

Thanks