Question

I’ve been trying a regular CSS3 dropdown.

// CSS
.board {
width: 600px;
height: 50px;
cursor: pointer;
}

.button {
    width: 150px;
    height: 50px;
    float: left;
    display: inline;
    background-color: black;
    color: white;
    font: 20px Arial, Verdana, sans-serif;
}

.sboard {
    width: 150px;
    height: 100px;
    background-color: black;

}

//HTML
<ul class = "board"><li class = "button">
    <ul class = "sboard"></ul>
</li></ul>

I can’t get it working for iPhone seemingly due to my device’s unresponsiveness to touch.
My google research just resulted into meaningless results.
Which properties should I add to the list?

Answer 1

IOS needs some indication that the menu is a touch target. After reading through some Apple documentation (which I can’t find again now or I’d link to it) we added onclick="void(0)" to menu items that weren’t links.

Our leaf menu items are already links <a href="..."> but top-level and intermediate sub-menus in our system are <li><span>...</span></li> and IOS wouldn’t react and open the sub-menu until we added that onclick handler.

These became <li><span onclick="void(0)" onfocus="void(0)">...</span></li> (with the onfocus added so keyboard tab navigation works)