Can’t get Css Menu effect on hover

[salvatore]

Hello everybody

I’m trying to get this effect on a menu
[Menu effect](http://i.imgur.com/LSCSF.jpg “menu effect”)

I’m new on web design so I have no idea how to achieve this effect
this is what I want:
On hover: background of the ul li appears with opacity.

I tryed with this:

nav ul li a:hover{
background-color: #55a1ba;
opacity: 0.5;
}

but it didn’t work, it takes opacity of the font too and I just want the background gets the opacity.

Any help? :)

[salvatore]

the code I have used

[salvatore]

nav ul{
margin: 0;
padding: 0;
list-style-type: none;
}

nav ul li{
display: block;
float: left;
padding: 0 6px;
}

nav ul li a{
text-decoration: none;
font-size: 16px;
padding: 1px 6px 3px 6px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #fff;
font-family: nilland-black, arial;
display: block;
}

nav ul li a:hover{
background-color: #55a1ba;
opacity: 0.9;
}

[salvatore]

I have created this file online for a better explanation: [html-css code](http://codepen.io/salvatore/pen/qbkGy “html/css code”)

[DustinWoods]

Try this:

nav ul li a:hover{

background-color: #55a1ba; /*Fallback for older browsers*/

background-color: rgba(85, 161, 186, 0.9);

}

[salvatore]

It works!! :) thank you guys!

[Author]

Posts