Mobile menu that doesn’t use javascript. Uses hidden checkbox to toggle state.
HTML:
<nav class="mobile-menu">
<label for="show-menu" class="show-menu"><span>Menu</span><div class="lines"></div></label>
<input type="checkbox" id="show-menu">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
CSS:
.mobile-menu { display:block; width:100%; background: #8aa8bd; line-height: 1.6em; font-weight: 400; width:100%; text-align:center; position: relative; margin:0 auto; }
/*Strip the ul of padding and list styling*/
.mobile-menu ul { list-style-type:none; margin: 0 auto; padding-left:0; text-align:center; width:100%; position: absolute; background: #8aa8bd; }
/*Create a horizontal list with spacing*/
.mobile-menu li { display:inline-block; /*float: left; margin-right: 1px;*/ }
/*Style for menu links*/
.mobile-menu li a { display:block; min-width:140px; text-align: center; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; text-transform:uppercase; background: #8aa8bd; text-decoration: none; margin-left:-5px; padding: 10px 0; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; }
/*Hover state for top level links*/
.mobile-menu li:hover a { color: #4db3ff; background-color:#ccddee; }
/*Style for dropdown links*/
.mobile-menu li:hover ul a { background: #f3f3f3; color: #2f3036; height: 40px; line-height: 40px; }
/*Hover state for dropdown links*/
.mobile-menu li:hover .mobile-menu ul a:hover { color: #4db3ff; }
/*Hide dropdown links until they are needed*/
.mobile-menu li ul { display: none; }
/*Make dropdown links vertical*/
.mobile-menu li ul li { display: block; float: none; }
/*Prevent text wrapping*/
.mobile-menu li ul li a { width: auto; min-width: 100px; padding: 0 20px; }
/*Style 'show menu' label button and hide it by default*/
.mobile-menu .show-menu { text-decoration: none; color: #fff; background: #8aa8bd; text-align: center; padding: 10px 15px; display: none; cursor: pointer; text-transform: uppercase; }
.mobile-menu .show-menu span{ padding-left: 35px; }
/*Hide checkbox*/
.mobile-menu input[type=checkbox] { display: none; }
/*Show menu when invisible checkbox is checked*/
.mobile-menu input[type=checkbox]:checked ~ #menu{ display: block; }
/*Responsive Styles*/
@media screen and (max-width : 800px) {
.mobile-menu .lines { border-bottom: 15px double #f8f8f8; border-top: 5px solid #f8f8f8; content:""; height: 5px; width:20px; padding-right:15px; float: right; }
/*Make dropdown links appear inline*/
.mobile-menu ul { position: static; display: none; }
/*Create vertical spacing*/
.mobile-menu li { margin-bottom: 1px; }
/*Make all menu links full width*/
.mobile-menu ul li,
.mobile-menu li a { width: 100%; }
/*Display 'show menu' link*/
.mobile-menu .show-menu { display:block; }
} 
