CodePen

HTML

            
              <header class="header">
<nav class="mainnav">
<ul>
<a href="#"><li>Home</li></a>
<a href="#"><li>About us</li></a>
<a href="#"><li>Portfolio</li></a>
<a href="#"><li>Snippets</li></a>
<a href="#"><li>Contact us</li></a>
</ul>
</nav>
</header>

            
          
!

CSS

            
              header
{
	position:relative;
	width:100%;
	height:100px;
	background:#7bccc6;
	border-bottom:8px solid green;
	
}
.mainnav
{
	position:absolute;
	margin-top:0;
	
}
.mainnav>ul
{
	margin-top:50px;
	
}
.mainnav>ul li
{
	display:inline-block;
	margin-right:30px;
	background:#28d6ea;
	width:80px;
  margin-top:-5px;
	text-align:center;
	border-radius:2px;
	border-bottom:8px solid #1791ab;
	color:white;
	font-weight:bold;
	text-shadow:1px 1px 1px 1px black;
  line-height:55px;
}

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

JS

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