<div class="box">
	<ul>
		<li><a href="#"><span>HOME</span></a></li>
		<li><a href="#"><span>ABOUT</span></a></li>
    <li><a href="#"><span>NEWS</span></a></li>
    <li><a href="#"><span>CONTACT</span></a></li>
	</ul>
</div>

.box {
		width: 100%;
		margin: 0 auto;
		padding: 4em;
		box-sizing: border-box;
		background-color: #5c87a6;
		text-align: center;
	}

	ul li {
		font-size: 3rem;
		letter-spacing: .1em;
		font-style: italic;
    font-family: Arial;
		font-weight: bold;
    list-style: none;
	}
	
	ul li a {
		color: #fff;
		-webkit-transition: color .3s ease;
		transition: color .3s ease;
    text-decoration: none;
	}
	
	ul li a:hover {
    color: #5c87a6;
		text-shadow: 1px 1px 0 #fff,-1px 1px 0 #fff,1px -1px 0 #fff,-1px -1px 0 #fff;
}