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 Us</a></li>
  </ul>
</nav>  
            
          
!
via HTML Inspector

CSS

            
              * {
  box-sizing:border-box;
}

nav {
  width:960px;
  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;
  height:150px;
  display: block;
  float: left;
  border-right:1px solid grey;
  border-left:1px solid white;
  padding:0 0px;
  width:15%;
  background:darkgrey;
  transition: width 0.75s ease;
}

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

li:hover {
  width:55%;

}

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

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

JS

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