CodePen

HTML

            
              <ul>
  <li><a href="#">one</a></li>
  <li><a href="#">two</a></li>
</ul>

<ul>
  <li><a href="#">this</a></li>
  <li><a href="#">that</a></li>
</ul>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              ul{
      display:block;
      list-style:none;
      overflow:hidden;
      margin-left:20px;
      padding:0;
      float:right;
   }
      li{
         display:block;
         float:left;
      }
         li a{
            display:block;
            font-weight:bold;
            text-decoration:none;
            color:#888;
            text-shadow:0 1px #fff;
            border:1px solid #d5d5d5;
            border-bottom-color:#ddd;
            background:#ddd;
            background:-webkit-gradient(linear,left top,left bottom,color-stop(.25, #eee),color-stop(1, #ddd));
            background: -webkit-linear-gradient(top,#eee 25%,#ddd 100%);
            background: -moz-linear-gradient(top,#eee 25%,#ddd 100%);
            background: -o-linear-gradient(top,#eee 25%,#ddd 100%);
            background: linear-gradient(top,#eee 25%,#ddd 100%);
            -webkit-box-shadow:inset 0 1px 2px rgba(255,255,255,0.1);
               -moz-box-shadow:inset 0 1px 2px rgba(255,255,255,0.1);
                    box-shadow:inset 0 1px 2px rgba(255,255,255,0.1);
         }
            li:first-child a{
               padding:4px 12px 6px 16px;
               border-right:0;
               -webkit-border-radius:18px 0 0 18px;
                  -moz-border-radius:18px 0 0 18px;
                       border-radius:18px 0 0 18px;
            }
            li:last-child a{
               padding:4px 16px 6px 12px;
               -webkit-border-radius:0 18px 18px 0;
                  -moz-border-radius:0 18px 18px 0;
                       border-radius:0 18px 18px 0;
            }
            li a:hover{
               background:#eee;

            }
            li a:active{
               text-shadow:0 -1px #fff;
               background:#ccc;
            }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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