CodePen

HTML

            
              <nav role="navigation">
  <ul>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
  </ul>
</nav>
            
          
!
via HTML Inspector

CSS

            
              nav[role=navigation] {
  display:block;
  background:red;
  position:relative;
  width:100%;
  height:80px;
  text-align:center;
  
  ul {
   padding-top:30px;
    
    li {
     display:inline-block;
      
      a {
        margin:4px;
        padding:4px;
        font-weight:bold;
        color:lighten(red,30%);
        text-decoration:none;
        &:hover {
          background:white;
          color:red;
        }
        &:visited{}
        &:active {}
      }
    }
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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