dropdown menu on iPhone and iPad

Question

I have a working dropdown menu on my site, but it doesn't work at all on iPhone and iPad. Is there a manageable way to force iPhone/iPad to use their native menu selectors?

http://jsfiddle.net/craigzilla/6nZ5Q/

HTML:

<div class="dropdown"> <span class="dropdown-toggle" tabindex="0"></span>
    <div class="dropdown-text" id="dropdown_colours">Colours</div>
    <ul class="dropdown-content" id="dropdown_colours">
        <li><a href="../black.html" target="_self">Black</a>
        </li>
        <li><a href="../grey.html" target="_self">Grey</a>
        </li>
        <li><a href="../red.html" target="_self">Red</a>
        </li>
        <li><a href="../blue.html" target="_self">Blue</a>
        </li>
        <li><a href="../green.html" target="_self">Green</a>
        </li>
        <li><a href="../purple.html" target="_self">Purple</a>
        </li>
    </ul>
</div>

Answer 1

I was thinking to the CSS property -webkit-appearance , but there is no value which could force the appearance to a select box AFAIK (if there were one, how could webkit know that it should treat the li as option ?)

You have to use a select tag instead of an unordered list to make iOS' Webkit changing automatically its appearance to a native one.

You could detect when the user is using a mobile browser, and load your menu dynamically.

You could either find try to reproduce the native select box with CSS too, if you don't want to change your HTML markup...

See Apple's documentation for reference.