Pure Css Clickable Dropdown?

This tutorial explains how to use the :hover pseudo-class to style HTML elements on hover and how to how create a dropdown when hovering over a particular element in pure CSS (with

Solution 1:

Here you are using a hidden checkbox, and showing the menu when it is "checked".

/*hide the inputs/checkmarks and submenu*/input, ul.submenu {
  display: none;
}

/*position the label*/label {
  position: relative;
  display: block;
  cursor: pointer;
}

/*show the submenu when input is checked*/input:checked~ul.submenu {
  display: block;
}

<inputid="check01"type="checkbox"name="menu" /><labelfor="check01">Menu</label><ulclass="submenu"><li><ahref="#">Item 1</a></li><li><ahref="#">Item 2</a></li></ul>

Taken from this Codepen and simplified.

Solution 2:

Use radio buttons and sibling selectors.

This differs from checkboxes in that it will automatically close the open menu item when a different one is clicked.

.menuul,
.menuinput,
.menu.closer,
.menuinput:checked~.opener {
  display: none;
}

.menuinput:checked~ul,
.menuinput:checked~.closer {
  display: block;
}

<ulclass="menu"><li><inputtype="radio"name="menuopt"id="drop1" /><labelclass="opener"for="drop1">Parent item 1</label><labelclass="closer"for="dropclose">Parent item 1</label><ul><li><ahref="">Menu item 1</a></li><li><ahref="">Menu item 2</a></li><li><ahref="">Menu item 3</a></li></ul></li><li><inputtype="radio"name="menuopt"id="drop2" /><labelclass="opener"for="drop2">Parent item 2</label><labelclass="closer"for="dropclose">Parent item 2</label><ul><li><ahref="">Menu item 1</a></li><li><ahref="">Menu item 2</a></li><li><ahref="">Menu item 3</a></li><li><ahref="">Menu item 4</a></li><li><ahref="">Menu item 5</a></li></ul><inputtype="radio"name="menuopt"id="dropclose" /></li></ul>

View on jsFiddle