<nav> <a href="#nav" id="nav"><i class="fa fa-bars"></i></a> <a href="#" class="close"><i class="fa fa-bars"></i></a> <ul> <li>a</li> <li>b</li> <li>c</li> <li>d</li> </ul> </nav>
nav > ul { border: 1px solid #222; left: -80px; list-style-type:none; margin: 0; padding:5px 20px; position: absolute; top: 45px; transition:all .3s ease; -webkit-transition:all .3s ease; } nav > .close, a#nav:target { display: none; } a:target ~ ul, a:target ~ .close { display: inline-block; } a:target ~ ul { left: 0; }