Menu does not open levels on iPhone or iPad

Navigation
1

I programmed a website, and for the menu I used jQuery hoverdrop . But it does not open in any way on iPhone or iPad. In other phones and tablets works normally (only takes a little longer to load depending on the speed of the internet). What can it be? And how can I resolve this problem?

The HTML code I have is: 

<html>
<div class="pad1"></div>
<ul id="menu">
    <li><a href="index.html">home</a></li>
    <li class="sub"><a>curau</a>
        <ul>
            <li><a href="pg/quemsomos.html">quem somos</a></li>
            <li><a href="pg/clipping.html">clipping</a></li>
        </ul>
    </li>
    <li class="sub"><a>portfólio</a>
        <ul>
            <li><a href="pg/idvisual.html">id visual</a></li>
            <li><a href="pg/estamparia.html">estamparia</a></li>
            <li><a href="pg/campanha.html">campanhas</a></li>
            <li><a href="pg/outrosestudos.html">outros estudos</a></li>
            <li><a href="pg/outrostrabalhos.html">outros trabalhos</a></li>
            <li><a href="pg/inspiracoes.html">inspirações 2014</a></li>
        </ul>
    </li>
    <li class="sub"><a>coleções</a>
        <ul>
            <li><a href="pg/venda.html">à venda</a></li>
        </ul>
    </li>
    <li class="sub"><a href="pg/contato.html">contato</a></li>
</ul>
<div class="pad2"></div>

</html>

And the CSS: 

.pad1 {width:50px; height:20px; background:#000; display:inline; float:right; margin:3px 3px 0 3px;}
.pad2 {width:50px; height:20px; background:#000; display:inline; float:right; margin:3px 3px 0 0;}

#menu {list-style-type:none; padding:0; margin:0; float:right;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li {float:left; background:#000; margin:3px 3px 0 0; position:relative;}
#menu li.sub {background:#000;}

/* for IE5.5 and IE6 only */
#menu table {border-collapse:collapse;position:absolute;top:0;left:0;z-index:80;font-size:1em;}

#menu li a {display:block; color:#ee0; height:25px; font-family: 'Maven Pro', sans-serif;, cursive; font-size:18px; line-height:24px; width:140px; text-decoration:none; text-align:center;}
#menu :hover,
#menu :focus, {color:#ee0; background:#000;}
#menu :hover > a,
#menu :focus > a {color:#ee0; background:#000;}

#menu ul, 
#menu :hover ul ul,
#menu :focus ul ul,
#menu :hover ul :hover ul ul,
#menu :focus ul :focus ul ul,
#menu :hover ul :hover ul ul.left,
#menu :focus ul :focus ul ul.left {position:absolute; left:-9999px; width:140px;}

#menu :hover ul,
#menu :focus ul{left:0;top:25px; background:url(transparent.gif);} /* the background image is for IE7 */

#menu :hover ul :hover ul,
#menu :focus ul :focus ul,
#menu :hover ul :hover ul :hover ul,
#menu :focus ul :focus ul :focus ul {padding:0 3px; left:125px; top:-3px;}

#menu :hover ul :hover ul.left,
#menu :focus ul :focus ul.left,
#menu :hover ul :hover ul :hover ul.left,
#menu :focus ul focus ul :focus ul.left {padding:0 3px; left:-131px; top:-3px;}
    
asked by anonymous 10.02.2014 / 19:37

1 answer

1

You have the idea to do this here: HOVER DROP

?

I tested it here in Safari, Chrome and Firefox. It worked.

Try adding this code: 

$(function () {
  $(".sub").on('hover click', function () {
    $(this).find('ul').css('left', '0px')
  });
});

EXAMPLE

    
10.02.2014 / 20:21
bxSlider does not reload when you click on your hidden parent Hide and show the header of a listview when rolled