<html>
<body>
  <nav>
    <input id="nav-state" type="checkbox">
    <label id="nav-label" for="nav-state"></label>
    <ul>
      <li><a href="#">Work</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Company</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Careers</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  
<p>
If you open this page in a standalone browser and resize the screen you'll notice a few things. 
   <ul> <li>First, you'll see that the menu above will resize it's font to be screen appropriate using a media querry. </li>
   <li> The "more" menu should appear on smaller screens and allow you to expand the menu vertically. This works well for small screens and gives much better information scent. </li>
   <li>On small screens the top menu should also scroll horizontally. This partially works, but would need some fixes to work well across mobile browers. </li>
   <li>Future adoptation would include support for sub-menu items that would be drop-down when using a mouse and drill-down when on small devices that don't support hover. 

</body>
</html>
body,html {
  margin:0px;  
}
nav {
  width: 100%;
  background-color: #1a1a1a;
}
#nav-label {color:#fff;background-color:red;display:block;position:relative;}
nav ul {
  position: relative;
  margin: 0;
  padding: 0 12px 0 0;
  list-style: none;
  white-space: nowrap;
  overflow: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;


}


nav li {
  display: inline-block;
  font-size:25px;
  font-family:helvetica;
}

nav a {
  display: block;
  padding: 10px;
  color: #fff;
  text-decoration: none;
}

#nav-state {
  display: none;
}


@media (max-width: 400px) {

  nav li {
      font-size:15px;    
  }
  
#nav-state:checked ~ ul > li {
  display: block;
}


#nav-state:checked ~ label::before {
  content: 'Less';
    
}

nav label {
  float: right;
  color: #fff;
  padding: 10px 10px 10px 25px;
  cursor: pointer;
 }
label::before {
  content: 'More...';
} 

  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.