<!--This is your HTML for the nav-->

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#work">Work</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>
 
<!--And this is your HTML for your sections-->
 
<section id="home"></section>
<section id="about"></section>
<section id="work"></section>
<section id="contact"></section>

/* This code strips the UL styling */
 
ul {
    list-style-type:none;
    margin:0;
    padding:0;
}
 
/* And this code creates a horizontal bar, with spacing in between each menu item!*/
 
li {
    display:inline-block;
    margin-right: 1px;
}

/* underline only on hover */
a {
  text-decoration: none;
  color: grey;
}
a:hover {
  text-decoration: underline;
  color: cornflowerblue;
}