<!DOCTYPE HTML> <html> <head> <style type="text/css"> body { background: #AAA; } .menu li { cursor: pointer; padding: 5px 15px; } .menu li:hover { background: #EEE; } .menu ul { background: #FFF; box-shadow: 0 0 25px #000; list-style: none; margin: 20px 0 0; opacity: 0; padding: 0; position: absolute; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; visibility: hidden; } .menu ul::after { border: 14px solid transparent; border-bottom-color: #FFF; content: ''; left: 50%; margin-left: -14px; position: absolute; top: -28px; } .menu.show ul { opacity: 1; visibility: visible; } </style> </head> <body> <div class="menu"> Show menu <ul> <li>Menu 1</li> <li>Menu 1</li> <li>Menu 1</li> <li>Menu 1</li> <li>Menu 1</li> </ul> </div> <script type="text/javascript"> document.querySelector('.menu').onclick = function() { this.classList.toggle('show'); }; </script> </body> </html>
