<nav>
    <ul>
      <li>&#9776;
        <ul>
          <li id="header">Menu</li>
          <li><a href="/>ampready</a></li>
          <li><a href="/getting-started/>getting started</a></li>
        </ul>
      </li>
    </ul>
    <div id="closemenu">&#215;</div>
  </nav> - See more at: http://cymiz.com/forum/index.php/topic,3130.0.html#sthash.xVscH8SN.dpuf

/* 40px padding top for the top menu*/
body{padding:40px 32px 4px 32px;}

/* fixed top menu has a 40px height*/
nav{height:40px;border-bottom:1px solid #ddd;position:fixed;top:0;left:0;right:0;background:#fff;z-index:990;}

/* remove bullets and add transition effect */
nav ul{list-style-type: none;margin:0;padding:0;transition: transform .75s ease-in-out;  -webkit-transition: transform .75s ease-in-out;}

/* fixed menu button */
nav > ul >li{position: fixed;left:36px;top:0px;z-index:991;line-height:40px;}

/* initial state: hide the menu */
nav > ul > li > ul{position:fixed;top:0;left:-240px;width:240px;bottom:0;background:#fefefe;z-index:990;padding-top:36px;border-right:1px solid #ddd;  }

/* Hover state, the menu button has been clicked*/

/* scroll the menu into the page */
nav > ul > li:hover > ul{transform: translate3d( 240px, 0, 0 );-webkit-transform: translate3d( 240px, 0, 0 );}

/* div on top of menu to simulate the close button, delay animation for .75s*/
#closemenu{position:fixed;top:-40px;left:0;right:0;height:40px; z-index:999; line-height:40px; padding-left:210px;font-size:36px;
        transition: transform .05s ease-in-out;-webkit-transition: transform .05s ease-in-out; -webkit-transition-delay: 0.70s;transition-delay: 0.70s;
      }
/* the the close menu button, uses ~ selector */
nav ul:hover  ~ #closemenu{transform: translate3d( 0, 40px, 0 );-webkit-transform: translate3d( 0, 40px, 0 )}

/* styling */
nav a{color: #4A8DDD;}
nav > ul > li > ul > li{font-size:20px;padding:8px 0 8px 8px;border-bottom:1px solid #ddd;}
nav > ul > li > ul > li >a{display:block; text-decoration:none;padding:8px 0;}