Pure <div> pure css dropdown menus, making them clickable on touch browsers, iOS, iPad?

Question

I have some menus in legacy code structured like so:

<div id="show-hide-facets-button">iOS/Touch Browser Popdown Test
    <div id="show-hide-facets-dropdown">
        <ul>
        <li class="show-hide-facets-row" id="item1">Item One</li>
        <li class="show-hide-facets-row" id="item2">Item Two</li>
        </ul>
    </div>
</div>

The popdown is hidden until hover:

#show-hide-facets-button {
}
#show-hide-facets-dropdown {
    display: none;
}
#show-hide-facets-button:hover #show-hide-facets-dropdown {
    display: block;
}

A jsfiddle is at http://jsfiddle.net/brycenesbitt/y3kb7/

Note there are no anchors or other clickable elements. In this case what's a clean way to introduce a clickable element at the top level, so mouse browser users can continue to hover, but touch browser users can access the menu items using a click? The menu items are all activated with jquery and the touch browsers work fine there.

Answer 1

I found the cleanest solution on the Apple developer site:

<div id="show-hide-facets-button" onclick = "void(0)">

Adding a do-nothing onclick handler. Mobile safari will issue a mousemove and click onto this element when touched. See https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

Answer 2

Yup, it can be a little bit tricky to get the hover pseudo-class to work as desired for drop-down menus on a touch device. If a jQuery plugin is an option, you might consider Superfish. The Silk Developer Guide has a page that discusses the Superfish solution for hover menus.

Good luck!