iPad/iPhone Touch Event on Hover CSS

Question

I have a simple menu set up like this:

  <ul>
   <li>Item </li>
   <li>Item </li>
    <li>Item </li>
  </ul>

When you hover over the item on the computer it shows the other <ul> and <li> items fine. On the i-devices, if you touch the item, it does not do anything. My very first <li> that has an image called iconic works perfect, but I cannot figure out why that works and the others do not.

http://jsfiddle.net/5v9nc/

Thank you for your help.

I tried this:

http://blog.0100.tv/2010/05/fixing-the-hover-event-on-the-ipadiphoneipod/

But it did not help. Please help! I have tried the suggestions below but it does not work for my fiddle example.

Answer 1

HTML:

<ul>
  <li class="main_menu_item"><a href="/">Page</a></li>
  <li class="main_menu_item"><a href="/">Page</a>
    <ul class="sub_menu">
      <li><a href="/">Page</a></li>
    </ul>
  </li>
</ul>

jQuery:

$(document).ready(function() {
    if ( (navigator.userAgent.match(/iPhone/i)) 
    || (navigator.userAgent.match(/iPod/i) ) 
    || (navigator.userAgent.match(/iPad/i))) {
        $('.main_menu_item').bind('mouseenter', function(e) {
            $(this).find('.sub_menu').show();
            $(this).find('.sub_menu').css('visibility','visible');
        });
        $('.main_menu_item').bind('mouseleave', function(e) {
            $(this).find('.sub_menu').hide();
        });
    }
});

Answer 2

Terraling's solution using onclick="return true" worked a treat for me. I made it more elegant by using a line in JQuery to add it to all the li elements in my nav list, which kept the raw HTML nice and neat. Tested it on iOS 5.1 on the iPhone and iPad.

$("ul#bars li").attr("onclick","return true");

Answer 3

I found out how. Add

<a href='#'>(your menu header)</a>

to all of the <li> in the parent <ul>. No jQuery/JS required.

Answer 4

I had the same problem and after looking at your solution I tried something absurdly simple that has worked, so I thought I'd share it.

To restate the problem, I have CSS menus where hover-ing over a menu item reveals the sub-menu items. On the iPad which has no hover, clicking on the menu item reveals the sub-menu in some cases and not in others.

Wherever it doesn't work, I just add onclick="return true" to the <li>, and hey presto it works.

Answer 5

You could try using touchstart or touchend which is probably a better method depending on what you’re trying to accomplish.

//ipad and iphone fix
// using jQuery 1.7.x (on method instead bind)
if ( (navigator.userAgent.match(/iPhone/i)) 
   || (navigator.userAgent.match(/iPod/i) ) 
   || (navigator.userAgent.match(/iPad/i))) 
{
      $(".menu li a").on('touchstart', function(){ 
           console.log("touch started");
      });
      $(".menu li a").on('touchend', function(){
           console.log("touch ended");
      });
}

Ref: http://blog.0100.tv/2010/05/fixing-the-hover-event-on-the-ipadiphoneipod/

Answer 6

No jquery or javascript needed. Just html/css:

        <div id="header">
            <ul id="nav">
                <li><a href="something">something</a></li>
                <li><a href="something">something</a>
                    <div class="drop">
                        <ul>
                            <li><a href="something">something</a></li>
                            <li><a href="something">something</a></li>
                        </ul>
                    </div> <!-- /.drop -->
                </li>
                <li><a href="something">something</a></li>
                <li><a href="something">something</a></li>
            </ul>
        </div> <!-- /#header -->

And the CSS that controls it:

.drop ul:after,
#nav:after
{
    content:'';
    display:block;
    clear:both;
}
#nav li
{
    position:relative;
    width:25%;
    float:left;
    padding:16px 0 0 0;
    background:url(../images/separator.gif) no-repeat;
    letter-spacing:1px;
    word-spacing: -1px;
    text-align:center;
}
#nav li:first-child,
#nav li.first-child
{
    background:none;
}
#nav a
{
    color:#E39916;
    padding:0 0 13px;
    display:block;
}
#nav a:hover
{
    color:#37ABD6;
}
#nav li:hover,
#nav li.hover
{
    position:relative;
}
#nav li:hover .drop .drop,
#nav li.hover .drop .drop
{
    display:none;
}
#nav li:hover .drop,
#nav li.hover .drop,
#nav li .drop li:hover .drop,
#nav li .drop li.hover .drop
{
    display:block;
}
#nav .drop li:hover .drop .drop,
#nav .drop li.hover .drop .drop
{
    display:none;
}
#nav .drop .drop li:hover .drop,
#nav .drop .drop li.hover .drop
{
    display:block;
}
.drop
{
    position:absolute;
    left:1px;
    top:50px;
    background-color:#E8F7FF;
    border:1px solid #fff;
    border-width:1px 1px 0;
    width:90%;
    min-width:115px;
    display:none;
}
.drop .drop
{
    left:95%;
    top:2px;
    z-index:9999;
}
.drop-left
{
    left:-95% !important;
    top:2px;
    z-index:9999;
}
.drop ul
{
    margin:0;
    padding:0;
    list-style:none;
    width:100%;
}
#nav .drop li
{
    margin:0;
    padding:0;
    background:none;
    font-size:13px;
    line-height:14px;
    border-bottom:1px solid #fff;
    float:left;
    width:100%;
    letter-spacing:1px;
}
#nav .drop li .drop li a,
#nav li .drop a
{
    text-decoration:none;
    background:none;
    display:block;
    color:#1C9CCB;
    padding:5px 5px 4px 5px;
    height:1%;
}
#nav .drop li .drop li a:hover,
#nav .drop li:hover a,
#nav .drop li.hover a,
#nav .drop a:hover
{
    background:#F9EFD1;
    color:#D88F0E;
    text-decoration:none;
}
#nav .drop .drop a
{
    padding-left:8px !important;
}
#main
{
    width:100%;
    overflow:hidden;
    margin:0 0 -391px;
    padding:10px 0 0 0;
    position:relative;
}