Short click / mouseover alternative for touch screen?

Question

I have a menu and a submenu that the parent menu title itself also leads to a page, the submenu opens on mouseover.

My problem is with touch screens, since there is no 'hover' on touch screen, there is no way to access the submenu, since the parent-menu page opens momentarily after the sub-menu appears without leaving time to choose value from it.

So from your experience is there an easy way to adapt the menu to touch-screens?
Is there a simple or conventional way to mimic mouseover on touchscreen?

I am not actually asking for code, but rather what's the common behavior in this scenarios, I already have a website that I want to make touch-screen friendly.

I obviously prefer a CSS solution over a script-based one.

Answer 1

You could have the submenu appear on press, then the user would drag down (still pressing the screen) and on finger up that could select the option.

Alternatively, you can have one click to open the sub menu, then another to select an item.

On a side note, this question would get a better response on https://ux.stackexchange.com/ it deals with user experience related questions

Answer 2

There are several approaches, for a CSS-only solution you could use the :target pseudo class.

.submenu {
    display: none;
}

.submenu:target {
    display: block;
}

<ul>
    <li>
        <a href="#submenu-1">Foo</a>
        <ul id="submenu-1" class="submenu">
            <li><a href="/bar">Bar</a></li>
            <li><a href="/baz">Baz</a></li>
        </ul>
    </li>
</ul>