CodePen

HTML

            
              <ul class="navi">
  <li>Home</li>
  <li>About</li>
  <li>Portfolio</li>
  <li>Contact</li>
</ul>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              .navi
  :width 100%
  :list-style none
  :background transparent
  :overflow hidden
  
  li
    :color #222
    :float left
    :width 25%
    :box-sizing border-box
    :padding 20px
    :text-align center
    :background rgba(255,20,20,0)
    :-webkit-transition all 0.4s
    :-moz-transition all 0.4s
    :-o-transition all 0.4s
    :transition all 0.4s
    
    &:hover
      :background rgba(100,100,200,1)
      :color #fff
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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