Try it Live

​x
 
<!DOCTYPE html>
<html>
<head>
<style>
​
.navigation-menu ul {
  padding: 0px;
  margin: 0px;
​
}
ul {   
    padding: 0;
    overflow: hidden;
    background-color: skyblue;
}
​
li {
    float: left;
}
​
li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 10px 20px;
    text-decoration: none;
}
​
li a:hover {
    background-color: slateblue;
}
​
#navigation ul
{
    font-size: 1.4em;
}
​
#navigation ul li
{
    display: inline;
    color:white;
}
#navigation li:not(:first-child):before {
    content: " | ";
}
​
</style>
</head>
<body>
​
<div class="navigation-menu">
<div id ="navigation">
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Courses</a></li>
  <li><a href="#">Blog</a></li> 
</ul>
</div>
</div>
</body>
</html>
​