Pure CSS click to drop down

I guess I’ve never tried to do this before, but if like me you’ve been using JS to create click to drop down menus for years give this a try:

Here’s a simplified snippet of the code we used on the split “new publication” button.

.button{
/* your button style*/
}
.button:after{
content:"button text";
}
.button .dropdown{ 
opacity: 0;
visibility: hidden;
transition: visibility 0.5s;
}
.button:focus{
pointer-events: none;
}
.button:focus .dd{
opacity: 1;
visibility: visible;
pointer-events: auto;
}
HTML:
<div class="button" tabindex="-1">
<div class="dropdown">
Dropdown content here
</div>
</div>

It’s worth noting that if you’re using an element which can’t normally be focused on for your button (such as the DIV I used above) you’ll need to add the following attribute for it to work:

tabindex="-1"