CodePen

HTML

            
              <!--this is the effect I want to achieve: http://i.imgur.com/LSCSF.jpg

The background of the "ul li a:hover" should be the only one that gets opacity so the skyblue background texture can be seen. -->

<nav>
					<ul id="menu">
						<li><a href="#">home</a></li>
						<li><a href="#">about</a></li>
						<li><a href="#">gallery</a></li>
						<li><a href="#">blog</a></li>
						<li><a href="#">programs</a></li>
						<li><a href="#">registration</a></li>
						<li><a href="#">contact</a></li>
					</ul>
</nav>


            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              
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: #000;
	font-family: nilland-black, arial;
	display: block;
	
}

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

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................