- This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
Viewing 6 posts - 1 through 6 (of 6 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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? :)
the code I have used
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;
}
I have created this file online for a better explanation: [html-css code](http://codepen.io/salvatore/pen/qbkGy “html/css code”)
Try this:
nav ul li a:hover{
background-color: #55a1ba; /*Fallback for older browsers*/
background-color: rgba(85, 161, 186, 0.9);
}
It works!! :) thank you guys!