Question

I have the following html mark up that works in all browsers but when viewed in iPhone / ipad, the drop down list will not open.

The reason for using an empty anchor tag was to keep styling the parent link the same way as the rest of my menu links due to my current css rules; but at the same time prevent the parent link to redirect the page.

Is this a very wrong approach and the cause to the issue I am experiencing?

<ul class="primary-nav">
   <li><a>Group links</a>
    <ul id="sub_nav" class="sub">  
    <li><a href="/">Link</a></li>  
    <li><a href="/">Link 1</a></li>  
    <li><a href="/">Link 2</a></li>  
    <li><a href="/">Link 3 </a></li>
    </ul>
   </li>
  </ul>

I can see there is the following javascript in place for the menu

    // Test is browser is IE
    var browserIsIE = null;
    if (jQuery.browser.msie == true) {
        browserIsIE = true;
    } else {
        browserIsIE = false;
    };
 // primary and secondary nav hover for IE < 9
    if (browserIsIE == true) {
        $(".primary-nav li, .secondary-nav li").hover(function () {
            $(this).addClass("hover");
        }, function () {
            $(this).removeClass("hover");
        });
    };

Thanks for your help.

Answer 1

The main problem is when browserIsIE evaluates to false, nothing will happen. The if statement requires it to be true before it attaches a hover event handler to your drop down menu.

Once you fix that, you will quickly realise that you can’t hover on touch devices. This post https://ux.stackexchange.com/questions/14257/re-thinking-hover-functionality-with-touchscreens-in-mind covers some nice ideas you could implement.