Untitled

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <nav>
      <ul>
        <li>
          <a href="#">Index</a>
        </li>
        <li>
          <a href="#">About</a>
        </li>
        <li>
          <a href="#">Products</a>
        </li>
        <li>
          <a href="#">Services</a>
        </li>
        <li>
          <a href="#">Contact</a>
        </li>
      </ul>
    </nav>
  </body>

</html>

// Code goes here

/* Styles go here */

nav {
  background-color: #333;
  padding: 0;
  margin: 0;
}
a {
  color: #bbb;
  text-decoration: none;
  background-color: #333;
  display: inline-block;
  margin: 0 5px;
  font-size: 16px;
  vertical-align: middle;
}

ul:before,
ul:after {
  display: table;
  content: ' ';
  clear: both;
}

ul {
  padding: 15px;
}

li:before,
li:after {
  border-top: 1px solid #999;
  content: '';
  display: inline-block;
  padding: 0 30px;
  position: relative;
  height: 1px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}

li {
  display: block;
  float: left;
}