I have a website (http://www.glzbc.org) with one main horizontal menu of pages and custom links (see screenshot below). Some of these custom links have sub-menu items that may be pages or custom links. This works fine on a desktop. When the mouse hovers over a main menu item with a sub-menu, the sub-menu drops down.
However, on a mobile device the entire menu tree displays (all main items and all sub-items). I only want to see the main items on the mobile device when menu is selected. How can I make the sub-items only appear when their parent item has been selected?