<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;
   	text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;
  }
  
  ul li a {
    color: #5c87a6;
    -webkit-transition: color .3s ease;
    transition: color .3s ease;
    text-decoration: none;
  }
  
  ul li a:hover {
    color: #fff;
}