CodePen

HTML

            
              <nav>
  <ul>
    <li>This</li>
    <li>navigation</li>
    <li>is</li>
    <li>awesome</li>
  </ul>
</nav>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              nav > ul > li {
  display:block;
  font:1.5em sans-serif;
  padding:0.1em 2em;
  float:left;
}
nav > ul:hover > li {
  padding:0.1em 1em;
}
nav > ul > li:hover {
  padding:0.1em 5em;
}
nav > ul > li:nth-child(1) {
  background-color:#ff3031;
}
nav > ul > li:nth-child(2) {
  background-color:#7bb010;
}
nav > ul > li:nth-child(3) {
  background-color:#00a8da;
}
nav > ul > li:nth-child(4) {
  background-color:#ffa400;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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