Some time ago, I unsuccessfully searched for a way to make collapsibles without JavaScript. I figured it out after learning the parent:hover child CSS selector syntax. Check it out.

The CSS is a little messy, mostly because I’m making three separate dropdowns with different behaviors. It’d be cleaner in most practical applications. The only gotchas I encountered were needing to specify the background color for the menus, and using white-space: nowrap on the horizontally opening menu so that the height is constant while animating. (I’m still not sure why the menus don’t inherit their parent’s background color.)