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.

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

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: