Hover for Touch Devices

问题

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.

回答1:

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.

回答2:

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.

回答3:

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

来源：https://stackoverflow.com/questions/6999069/hover-for-touch-devices

标签

html

css

hover