CodePen

HTML

            
              <header>
<nav>
<ul>
  <li class="current-item home">
    <a>Home</a>
  </li>
  <li class="gallery">
    <a>Gallery</a>
  </li>
  <li class="stuff">
    <a>Stuff</a>
  </li>
  <li class="contact">
    <a>Contact / Bookings</a>
  </li>
</ul>
</nav>
</header>
            
          
!
via HTML Inspector

CSS

            
              * {
  box-sizing: border-box;
}

header { 
  position: relative;
  width: 100%;
  height: 150px;
  background-color: #78787a;
}

nav {
  position: absolute;
  bottom: 0;
  float: left;
  margin-left: 40%;
  width: 60%;
  height: 71px;
}

ul {
  float: left;
  list-style: none;
  width: 100%;
}

li {
  float: left;
  background-color: #78787a;
  border-top: solid 4px #999;
  
  &.home{
    width:20.079129574678536%;
  }
  
  &.gallery {
    width:20.672601384767557%;
  }
  
  &.stuff {
     width:18.991097922848663%; 
  }
  
  &.contact {
    width:28.98120672601385%;
  }
  
  &.current-item, &:hover {
    background-color: #999;
    border-color: black;
  }
}

a {
  text-align: center;
  display: block;
  
  padding: 1em 0;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................