S3 Horizonal Resonsive Menu updated with sample codes you can customize more according to device requirements.

S3 Horizontal Responsive Menu

<link href='http://fonts.googleapis.com/css?family=Kite+One' rel='stylesheet' type='text/css'>
<h1>S3 Horizontal Responsive Menu</h1>

<div class="s3-menu">
  <div id="s3-menu">
    <ul>
    <li>
        <a href="#">
          Home <span>Front Page</span>
        </a>
    </li>
    <li>
        <a href="#">
          About <span>About Company</span>
        </a>
    </li>
    <li>
        <a href="#">
          Services <span>Our Solutions</span>
        </a>
    </li>
    <li>
        <a href="#">
          FAQs <span>Questions Answered</span>
        </a>
    </li>
    <li>
        <a href="#">
          Contacts <span>Keep in Touch</span>
        </a>
    </li>
    </ul>
  </div>
</div>

style.less

@base-size:100%;

*{font-family: 'Kite One', sans-serif;}
html{}
body{
  font-size:@base-size;
  margin:0;
  padding:0;
  background-color:#1E5799;
}
h1{text-align:center;}
.s3-menu{
  text-align:center;
  #s3-menu{
    ul{
      margin:0;
      padding:0;
      li{
        display:inline-block;
        background :#000;
        padding:0.5em;
        margin:0.3em;
        &:hover{
          background:#222;
          cursor:pointer;
        }
        a{
          color:#f1f1f1;
          text-decoration:none;
          span{
            display:block;
            font-size:@base-size - 20%;
            color:#888;
          }
          &:hover{
            span{
            }
          }
        }
        &:hover{
        }
      }
    }
  }
}
// Landscape phones and down
@media (max-width: 480px) {
}
// Landscape phone to portrait tablet
@media (max-width: 767px) {
  .s3-menu{
    #s3-menu{
      ul{
        li{
          display:block;
          a{
            span{
            }
          }
        }
      }
    }
  }
}
// Portrait tablet to landscape and desktop
@media (min-width: 768px) and (max-width: 979px) {
}
// desktop
@media (min-width: 980px){
}
@media (max-width: 979px) {
}
// Large desktop
@media (min-width: 1200px) {
}