Question

I have a nested menu list like below. At the moment, when someone clicks the main menu item, it follows that link. I was wondering if there is a way to get touchscreens to display the drop down menu without following the main menu item? The submenu has been styled ot display when the main menu item is hovered over

• Main Menu Item
  • Sub Menu Item

Answer 1

I hope you are trying to do as mentioned in this demo: http://jsfiddle.net/akhurshid/rvy6U/

NOTE: hover event is not present in touch devices, while tap event is present in touch devices. tap and click events behaves same.

jQuery

$('#accordion li').click(function(){

    if($('.sub').css('display') == 'none') {
        $(this).find('a').next('.sub').stop().slideToggle('slow')
    } else {
        $(this).find('a').next('.sub').stop().slideToggle('slow')    
    }

});​

HTML

<ul id="accordion">
    <li><a href="#">Section 1</a>
        <ul class="sub">
            <li>Mauris mauris ante</li> 
            <li>blandit et, ultrices a</li>
        </ul>
    </li>

    <li><a href="#">Section 2</a>
        <ul class="sub">
            <li>Mauris mauris ante</li> 
            <li>blandit et, ultrices a</li>
        </ul>
    </li>
</ul>  

CSS

.sub {
    display: none;
}​