JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>one
        <ul>
            <li>one 1
            <li>one 2
            <li>one 3
         </ul>
    </li>
    <li>two
        <ul>
            <li>two 1
            <li>two 2
            <li>two 3
         </ul>
    </li>
    <li>thee
        <ul>
            <li>thee 1
            <li>thee 2
            <li>thee 3
         </ul>
    </li>
                <li>forth
        <ul>
            <li><a href='#'>thee 1</a>
            <li><a href='#'>thee 1</a>
            <li><a href='#'>thee 1</a>
         </ul>
    </li>
</ul>
            <div id="debug"></div>

CSS

li ul {
   display: none;
}

li:hover {
    color:red;
}

li:hover ul {
   display: block;
}

li:active {
    color:red;
}

li:hover ul {
   display: block;
}

JavaScript

$('body').on('touchstart', 'a', function(e){
     if(!$(this).is(':focus')){
        $(this).focus();
        e.preventDefault();
         return false;
     }
});
$('body').on('click', 'a', function(e){
     $('#debug').html($('#debug').html()+
                      ($(this).is(':focus')?'foc':'nof')+
                      '<br>');
});