Forums

salvatore

Hello everybody

I'm trying to get this effect on a menu 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? :)

Koopa

You should post the code or a link instead of a picture...

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

DustinWoods

Try this:

   nav ul li a:hover{
    background-color: #55a1ba; /*Fallback for older browsers*/
    background-color: rgba(85, 161, 186, 0.9);
  }

Eric

You can also say...

 nav ul li a:hover{
  background: rgb(85, 161, 186);
  background: rgba(85, 161, 186, 0.9);
}

salvatore

It works!! :) thank you guys!

treehouse : what would you like to learn today?

Forums

[Solved] Can't get Css Menu effect on hover