Pure CSS Dropdown On Click
An entirely CSS dropdown menu with classes to activate it on click or on hover. No JavaScript required.
Check it out here: Demo Link
<!DOCTYPE html> <html> <head> <style> /* Just place the dropdown-menu class on a container (probably a div or a li element) and additionally place either dropdown-click or dropdown-hover on the container. Then inside add a button with the text to display, and create a ul with a list containing the items you want in your dropdown menu. Note that it's important that the first element inside the dropdown-menu container is an html button. This allows you to make use of the focus selector. */ /* Dropdown styles */ .dropdown-menu { position:relative; border: 1px solid rgba(0, 0, 0, 0.1); } .dropdown-menu a, .dropdown-menu a:hover, .dropdown-menu:hover .dropdown-menu ul a { text-decoration:none; } .dropdown-menu button { border: 0; background: transparent; cursor: pointer; font: inherit; color: inherit; } .dropdown-menu ul{ display: block; margin: 0; padding: 0; width:100%; list-style:none; position:absolute; padding-top:20px; display:none; } .dropdown-menu.dropdown-click button:focus + ul, .dropdown-menu.dropdown-click ul:hover, .dropdown-menu.dropdown-hover:hover ul { top:0px; display:block; } .dropdown-menu a:hover { text-decoration:underline; } /* General styles */ body { background-color:white; color: black; font-family: "Times New Roman", Georgia, Serif; } .navbar > li { background-color:#ccf; color:black; display: inline-block; } </style> </head> <body> <ul class='navbar'> <li class='dropdown-menu dropdown-click'> <button>Click me</button> <ul> <li><a title="1" href="#">Link 1</a></li> <li><a title="2" href="#">Link 2</a></li> <li><a title="3" href="#">Link 3</a></li> <li><a title="4" href="#">Link 4</a></li> </ul> </li> <li class='dropdown-menu dropdown-hover'> <button>Hover me</button> <ul> <li><a title="1" href="#">Link 1</a></li> <li><a title="2" href="#">Link 2</a></li> <li><a title="3" href="#">Link 3</a></li> <li><a title="4" href="#">Link 4</a></li> </ul> </li> </ul> </body> </html>

This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
Download this code in plain text format here