<!--this is the effect I want to achieve:

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

					<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>


↑ Insert the most common viewport meta tag


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


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