Opacity but NOT on text

Hi all,

I have some buttons which I want to be see-through when I hover them, but NOT the text. I can’t make it work…

http://f.cl.ly/items/0t2a3X0R0b07150k2721/Naamloos.jpg

On the picture the left button is active, the middle button is in-active, and the right button is hovered. As you can see on that button the text is see-through, which I don’t want.. There must be something wrong in my CSS, but what..

#page {margin-top:0px; font-family:Helvetica Neue; background: none repeat scroll 0 0 rgba(0, 0, 0, 0);}
#access {background: transparent;}

#access li:hover > a,
#access a:focus {opacity:0.1; background-color: rgb(255, 255, 255);
background-color: rgba(255, 255, 255, 0.1); color:black; font-weight:500;}
#access li:hover > a {background-color: rgb(255, 255, 255);
background-color: rgba(255, 255, 255, 0.1); color:black; font-weight:500;}

#access .current-menu-item > a,
#access .current-menu-ancestor > a,
#access .current_page_item > a,
#access .current_page_ancestor > a {background-color: rgb(255, 255, 255);
background-color: rgba(255, 255, 255, 0.1); color:white; font-weight:300;}

Thanks for your help!

PS: I’m working with the twentyeleven theme.