|Recipe 24||Touch-Responsive Drop-Down Menus|
Drop-down navigation is a common element in modern websites, and the pattern for implementing it is well established. On desktop browsers these menus work fine and require only some CSS magic. But as in Recipe 25, Mobile Drag and Drop, a user on a mobile device doesn’t have a mouse and so can’t trigger :hover events, at least not in a consistent way. We need to be aware of this limitation for our mobile users so we can give them the same experience as our desktop users.
Our first step is to write the markup for our top menu. We’ll write the markup so that users can navigate our site without the drop-down links. We can do this by making the top-level links point to ...