CodePen

HTML

            
              <div id="navigation">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="products.html">Products</a></li>
    <li><a href="blog.html">Blog</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li><a href="contact.html">Extra Link</a></li>
  </ul>
</div><!--END navigation-->​
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              body {
  font: normal 100%/1.5 Arial, sans-serif;
}
#navigation {
  height: 33px;
  float: right;
  margin-top: 74px;
  margin-right:74px; /* Added for visibility reasons */
  padding-right: 12px; 
  background: linear-gradient(top, orange, red ); /* Changed */
  padding: 0 10px; /* Added */
  border-radius:16px; /* Added */
}

#navigation ul li {
  float: left;
  height: 33px;
  padding: 0 17px; /* Changed */
  line-height: 33px;
  vertical-align: middle;
  background-color: #DDD; /* Added */  
}

#navigation li a {
  color: #000;
  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 ..................