Dropdown menu for mobile devices with Android (especially ICS)

Question

I am not an Android developer, I am just creating a website with a dropdown menu. Now I was told that this website has to be compatible with mobile devices too. I use Wordpress for creating this website and when I used a widget for my menu, it did not work on Android devices. I created a new dropdown menu using CSS only and tested it again on my 2 Android devices. The menu has 2 levels. When level 1 is hovered (I know that hover is bad for mobile devices at all) level 2 is displayed usually. The menu items of both levels link to a subpage of the website when they are clicked.

On my Samsung Galaxy S2 with Gingerbread the CSS menu works okay but not perfect. When level 1 (e.g. called "Fruit" is clicked, the page "Fruit" opens but the subitems (e.g. "Apple" and "Banana") are displayed. If "Apple" or "Banana" is clicked, the appropriate page is called. The only problem is: If I am already on the "Fruit" page and i click on "Fruit" in the menu again, nothing happens. That's not good at all but it would be okay for me.

Unfortunaltely I really have problems with the menu on my Asus Transformer Prime tablet with Ice Cream Sandwich. When I click a level 1 menu item, the page for this item is displayed but the submenu cannot be clicked. It's shown for just one second while the page is loading. So there is no possibility to reach the subpages of the website on this device.

I hope I described my problem clear enough, whether I have no Android knowledge nor my English is perfect. Please let me know if I should provide any CSS or HTML code or whatever. Thanks for any advice and help!

This is my PHP, HTML and CSS code:

PHP:

    <div id="menu" role="navigation">
        <?php wp_nav_menu(array('sort_column' => 'menu_order', 'menu' => 'Categories', 'container_class' => 'main-menu-class',
                                'container_id' => 'main-menu-id', 'theme_location'  => 'header', 'show_home' => true)); ?>
    </div> <!-- menu -->

HTML (generated by the PHP):

<div id="menu" role="navigation">
<div class="menu">
<ul>
<li class="current_page_item">
<a title="Home" href="http://whatever.com/wordpress/">Home</a>
</li>
<li class="page_item page-item-40">
<a href="http://whatever.com/wordpress/?page_id=40">Cupcake Ipsum</a>
<ul class="children">
<li class="page_item page-item-388">
<a href="http://whatever.com/wordpress/?page_id=388">Red Velvet Cupcake</a>
</li>
<li class="page_item page-item-390">
<a href="http://whatever.com/wordpress/?page_id=390">Mango Cupcake</a>
</li>
<li class="page_item page-item-392">
<a href="http://whatever.com/wordpress/?page_id=392">Chocolate Cupcake</a>
</li>
</ul>
</li>
<li class="page_item page-item-43">
<a href="http://whatever.com/wordpress/?page_id=43">Bacon Ipsum</a>
<ul class="children">
<li class="page_item page-item-405">
</ul>
</li>
<li class="page_item page-item-45">
<a href="http://whatever.com/wordpress/?page_id=45">Veggie Ipsum</a>
<ul class="children">
<li class="page_item page-item-397">
<a href="http://whatever.com/wordpress/?page_id=397">Tomato</a>
</li>
<li class="page_item page-item-399">
<a href="http://whatever.com/wordpress/?page_id=399">Lettuce</a>
</li>
<li class="page_item page-item-401">
<a href="http://whatever.com/wordpress/?page_id=401">Broccoli</a>
</li>
<li class="page_item page-item-403">
<a href="http://whatever.com/wordpress/?page_id=403">Onion</a>
</li>
</ul>
</li>
</ul>
</div>
</div>

CSS:

.menu {
background-color: #0B5A7D;
display: inline-block;
position: relative; }

#menu .menu-header ul,
div.menu ul {
list-style-type: none;
width: 921px;
margin: 0;
padding: 0; }

#menu ul li a {
text-decoration: none;
color: #CCCCCC;
font-size: 16px;
padding: 10px;
display: block;
position:relative; }

#menu ul li:hover a {
background-color: #006699; }

#menu ul li ul li a:hover {
color: #0B5A7D;
font-weight: bold;
background-color: #89b4ca; }

#menu ul li ul li a {
clear: left;
line-break: strict;
background-color: #006699;
padding: 5px;
font-size: 12px; }

.menu ul li {
display: inline-block;
position: relative;
border-left: solid 1px #006699; }

#menu ul li ul li {
display: block;
float: none;
clear: left;
width: 200px;
border: none;
background-color: #006699; }

.menu li ul {
position: absolute; }

.menu li:not(:hover) ul {
display: none; }

Answer 1

Here is a little script I created to convert normal menus to a select dropdown and then I believe I used media queries to switch out menus. Going to be making this a more flexible plugin soon probably.

http://imstillreallybored.com/2012/jquery-snippet-for-mobile-menu/