How to make a clickable dropdown menu in CSS?

Question

css

The Internet is full of examples of CSS dropdown menus on hover, how to make the same, but dropdown on click? Here already :hover will not help.

Answer 1

put display: block on the :focus event

Answer 2

https://www.google.com/webhp?sourceid=chrome-insta...
first link
web.izjum.com/css-open-on-click

Answer 3

Recently sculpted something like this.
Option without JS.
You hide the checkbox, right after it, the element that should unfold.
Next, you make a separate label for the checkbox and by clicking on it you turn on / off the hidden checkbox.
Thus, you get a trigger that is fixed in one of two positions.
Then, using a selector, you catch the object after the checkbox, depending on the state of the checkbox on / off
.check + .field{
field class styles when the checkbox in front of it is not checked
}
.check:checked + .field{
field class styles when the checkbox in front of it is checked
}
option is not universal (new dependent element = new checkbox + new style)

<div class="search">
            <label class="glyphicon glyphicon-search" for="searchButton"></label>
            <input type="checkbox" class="check" id="searchButton"/>
            <input class="field" name="searchInput" placeholder="Найти..."/>
        </div>

Answer 4

Do not be perverted, it's too early to rely on css in such things.
On the topic, apart from focus google menu css target .
For example css-tricks.com/off-canvas-menu-with-css-target
Codepen doesn't work for me, so here's an example on fiddle
jsfiddle.net/iiil/o9okyw1d

Answer 5

use js