1

I am using the following well-known CSS code to get a drop down menu on a web page. 

div#menu ul ul {
    display: none;
}
div#menu ul li:hover ul {
    display: block;
}

The menu is an u-list containing another u-list. When the mouse hovers over the list item in this menu, the second u-list becomes visible. The list items are no links, just text.

This works in modern browsers. I have a javascript forge for IE6.

However, it does not work on touch devices.

On the IPad nothing happens at all, even if I press on the list item. This is probably, because the list item is not an anchor. Or maybe, I need a click event to fix that.

On the Android browser, a longer press on the list item opens the sub-menu. However, no link in the submenu can be selected.

Can anyone help me?

In case, you need details (and have the time), look at

http://www.rene-grothmann.de/musica-aliter-test/

Thanks.

Rene
  • 3,746
  • 9
  • 29
  • 33
  • I would suggest considering using some Javascript and showing the menu on touch. Hover menus are unnecessarily difficult to use on touch devices. – Michael Mior Aug 09 '11 at 17:35

3 Answers3

3

div#menu ul li:hover ul needs to become div#menu ul li:active ul for it to respond on touch devices because they don't support hover states.

ayyp
  • 6,590
  • 4
  • 33
  • 47
  • This does not work. On the desktop, the menu can no longer be used, and on the Android, the active state does strange things, but not open the menu. – Rene Aug 09 '11 at 16:25
  • It won't work on the desktop, I believe you'd need to add a media query then to target the touch devices. It won't open the menu because `:active` only works while the person's finger is touched-down on the `ul`. I think your best bet would be using JavaScript to change the `display` to `display:block;`. – ayyp Aug 09 '11 at 16:32
0

I think your list items should be links. You should at least try it, and se if it works.

Hyperpedro
  • 38
  • 1
  • 5
  • Yes, I tried that. It works on the Android. I cannot test on IPad, since I have none right now :-( But on the Android, I do not like that solution, since it reloads the complete page (with the menu open) and positions it back to the top left corner. The menu does indeed remain open, ready for clicks. – Rene Aug 09 '11 at 16:18
0

Try nesting your list elements like this:

<ul>
    <li><a href="#">LINK</a>
        <ul>
        <li><a href="#">LINK</a></li>
        <li><a href="#">LINK</a></li>
        <li><a href="#">LINK</a></li>
        <li><a href="#">LINK</a></li>
        </ul>
    </li>
    <li>
    more links here, if you wish.
    </li>
</ul>

There should not be a problem with the hover state. Should work fine on any device. At lest that´s how it works for me.

Hyperpedro
  • 38
  • 1
  • 5
  • Yeah, that's OK. I would like to know a more standard approach to this, however. It sounds strange to have to make the list item a link, just to get the right behavior. If I find out, I post it here. Thanks. – Rene Aug 09 '11 at 18:09