For all the latest browsers, operating systems, PC, tablets and smartphones.

Click/Tap the top level list items to open the droplist, then either click/tap another top level list item or click/tap the same list item to close that open droplist.

For tablets and smartphones click/tap the 'Menu ☰' to slide down the top level list items and click/tap a top level item to slide down the drop list.

Click/tap the same top level item to close the droplist and click/tap the 'Menu ☰' to close the menu.

18th October 2015 - This demo had stopped working in Safari on iOS v9.x and OS X El Capitan v10.11 due to a 'bug'. I have found that this browser now needs a trigger when using :checked with the general sibling selector.

In this demo I have used .nav :checked ~ ul {opacity:1;} but there are several other triggers that will work.