CodePen

HTML

            
              <nav role='navigation'>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact </a></li>
  </ul>
</nav>  
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              * {
  box-sizing:border-box;
}

nav {
  width:965px;
  height:150px;
  margin:10px auto;
  background:lightgrey;
  padding: 0 15px;
  border-radius:5px;
}

ul {
  font-size:0;
  border-left: 1px solid grey;

}

li {
  font-size:25px;
  line-height:150px;
  display:inline-block;
  border-right:1px solid grey;
  border-left:1px solid white;
  padding:0 10px;
  width:10%;
  background:darkgrey;
  transition: width 1.25s ease;
}

li:last-child {
  border-right:none;
}

li:hover {
  width:70%;
  
}
li:hover ~ li {
  width: 5%; 
}

a {
  text-decoration:none;
  display:block; 
  transform: rotate(-90deg);
  text-align: center;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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