<!-- Tutorial from Design Shack 
https://designshack.net/articles/css/5-simple-and-practical-css-list-styles-you-can-copy-and-paste/ -->

<! DOCTYPE html>
<html>
  <head>
    <title> Horizontal Menu </title>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
  </head>

  <body>
    
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li class="active"><a href="#">About</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    
  </body>
  
<html>
/* Lazy browser reset */

* {
  margin: 0;
  padding: 0;
}

nav {
  margin: 50px auto;
  width: 500px;
  height: 40px;
}

/* list styles */
ul {
  width: 500px;
  margin: 0px auto;
  overflow: auto;
  list-style: none;
}

li {
  font-family: Open Sans, sans-serif;
  font-size: 20px;
  font-weight:300;
  float: left;
  padding-right: 20px;
  padding-left: 20px;
  border-right: 1px solid #999;
}

li:last-child {
  border: none;
}

li a {
  text-decoration: none;
  color: #888;
  
  /* transitions & animations
  transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease; */
}

li a:hover {
  color: #333;
}

li.active a {
  color: #F15A24;
  font-weight: normal;
}
  

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.