CodePen

HTML

            
              <header>
			<ul>
				      <li>
				      	<a href="#"> About</a>	
				      </li>
				      <li>
				      	<a href="#"> Career </a>	
				      </li>
				      <li>
				      	<a href="#"> Education </a>	
				      </li>
				      <li>
				      	<a href="#"> Gallery</a>	
				      </li>
				      <li>
				      	<a href="#"> Address </a>	
				      </li>
				      <li>
				      	<a href="#"> Contact</a>	
				      </li>
				    
				</ul>
				
				
				     	
			
		</header>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              header{
			height:200px;
			width: 80%;
			margin-top:15px;
			margin-left:30px;
			border-radius: 15px;
			box-shadow: inset 0px 0px 35px 2px ;
			
			border: 4px solid white;

			}
		
			
	ul	{
	    positin:fixed;
			
			margin-right: 40px;
			height:55px;
			width:960px;
			border-radius: 25px;
			margin-top: 60px;
			
			
			
			}
		
		ul li {
			
			float:left;
			margin-top:17px;
			list-style-type: none;
			
			
			}
		ul li a{
		  positin:fixed;
			font-weight: 700;
			color:rgb(223,226,226);
			text-decoration:none;
			text-transform:uppercase;
		          margin-top:20px;
			margin-right:20px;
			padding: 30px;
			background:white;
			color:black;
			border:3px solid white;
			border-bottom:3px solid white;
			border-radius:10px;
			box-shadow: 0px 0px 15px 1px rgb(166,166,166);
			border-radius: 80px 10px 80px 80px;	
			background-image: linear-gradient(bottom, rgb(157,22,34) 15%, rgb(189,49,62) 61%);
background-image: -o-linear-gradient(bottom, rgb(157,22,34) 15%, rgb(189,49,62) 61%);
background-image: -moz-linear-gradient(bottom, rgb(157,22,34) 15%, rgb(189,49,62) 61%);
background-image: -webkit-linear-gradient(bottom, rgb(157,22,34) 15%, rgb(189,49,62) 61%);
background-image: -ms-linear-gradient(bottom, rgb(157,22,34) 15%, rgb(189,49,62) 61%);

background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0.15, rgb(157,22,34)),
	color-stop(0.61, rgb(189,49,62))
		
);
		}
		ul li a:hover{
			color:rgb(226,223,223);
			padding: px 29px 11px 29px ;
			padding-top: 30px;
			border:3px solid white;
			border-bottom:3px solid rgb(67,67,67);
			text-shadow: 1px 1px 2px 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 ..................