<div class="menu">
<h1>Title</h1>
<input type="checkbox" id="menu">
<label for="menu">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAMFBMVEUAAAD///////////////////////////////////////////////////////////87TQQwAAAAD3RSTlMAAQ8TFB4fSV6Ag4Wt6/uDY192AAAAQElEQVQoz2NgIAiEXVCAAsP5/yjgOwMq//8vdIHfDO9RBX4y9KEKXGOgCUCz5SqmOzBciuEXDN9ihAc1wGANZAAX+vf+Xu8gUwAAAABJRU5ErkJggg==" width="32" height="32" alt="">
</label>
<ul>
<li><a href="#">Home</a></li>
<li>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li>
<ul>
<li>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
<a href="#">Links</a>
</li>
</ul>
<a href="#">Links</a>
</li>
</ul>
<a href="#">Links</a>
</li>
<li><a href="#">About</a></li>
</ul>
</div>
Back to Snippets
CSS3 Responsive Menu Example
Learn how to create your own responsive menus with our menu example, minimise and extend the browser size to view the different menus. Menus are what your visitors will see and use to navigate your website.