<div>
<ul>
  <li><span>1</span></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>
</div>
div{
  padding:20px;
}
ul{
  text-align:center;
  letter-spacing:-1em;
  li{
    display:inline-block;
    a,span{
      display:block;
      padding:2em;
      background:#efefef;
      text-decoration:none;
      color:#333;
      letter-spacing:normal;
    }
    a:hover,span{
     background:#2f80e1;
      color:#fff;
    }
  }  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.