CodePen

HTML

            
              <div class="wrapper">
  
  <!--navigation-->
  <ul class="nav">
    <li>
      <div>
        <a href="#">Home</a>
      </div>
      <div>
       Back to home 
      </div>      
    </li>
    <li>
      <div>
        <a href="#">Products</a>
      </div>
      <div>
       What we have for you
      </div>      
    </li>
     <li>
      <div>
        <a href="#">Services</a>
      </div>
      <div>
       Things we do
      </div>      
    </li>
     <li>
      <div>
        <a href="#">Blog</a>
      </div>
      <div>
       Follow our updates
      </div>      
    </li>
  <li>
      <div>
        <a href="#">Contact</a>
      </div>
      <div>
       Ways to reach us
      </div>      
    </li>
    
    
  </ul>
  <!--navigation ends-->
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              
.wrapper{width:980px; margin:0 auto; font-family:arial; font-size:11px; color:#000; text-align:left;}
.nav{list-style:none; margin:0; padding:0; display:block;}
.nav:after{clear:both;content:' '; display:block;}
.nav li{float:left; display:block; padding:0 15px 10px 15px; border-left:1px solid #ddd; text-align:lefft; font-family:Arial; font-size:11px; color:#999;}
.nav li a{font-family: Verdana; font-size:12px; text-transform:uppercase; color:#444; font-weight:bold; text-align:left; text-decoration:none;}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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