Hover how to trigger on a mobile browser

For example the HTML structure is as follows

<div>menu
<ul>    <li>item1</li  >    <li>item2</li> </ ul >
</div>

Css

{    display:block;}

As in the code, when the mouse hovers over the menu, the UL is displayed, but because the mobile browser does not have a mouse, the hover in the CSS cannot be triggered.

WORKAROUND: You can use a click to trigger hover

<Divonclick= "javascript:void (0)">Menu<ul>    <Li>Item1</Li>    <Li>Item2</Li></ul></Div>

To the DIV plus onclick event, click on the menu, it will trigger hover, display ul. However, this will cause the menu has been hover state, then how to leave the hover state?

It is also very simple to add an onclick event outside of the menu, and when you click outside the menu, the menu leaves the hover state.

<onclick= "javascript:void (0)">  ... </ Body >

Hover how to trigger on a mobile browser