CodePen

HTML

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

            
          
!

↑ Insert the most common viewport meta tag

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;
	height:50px;
	text-align:center;
	border-radius:2px;
	border-bottom:8px solid #1791ab;
	color:white;
	font-weight:bold;
	text-shadow:1px 1px 1px 1px black;
}

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

JS

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