Menus don't work on mobile

[ioquatix]

Not sure what is the best approach. If we make the top level <span> into <a> will the :hover selector work?

Otherwise, maybe we need to use some JavaScript to make it work better on mobile.

cc @courtneycb @JackMorganNZ @huba

[pyrmont]

@ioquatix It's buried in a footnote for the Safari on iOS listing in the compatibility table of the MDN page on :hover but tapping on elements won't trigger a :hover state in Safari on iOS unless that element is 'clickable'. The MDN page on the click event explains that elements that are 'clickable' are typically 'interactive' (e.g. <a> elements).

There are workarounds to make 'non-interactive' elements exhibit the same behaviour. The simplest (to my mind) is to set cursor: pointer; on the element (or any of its ancestors). The MDN page linked above lists some of the other options.