Меню JSDDM, не работающее на Android

Question

Я использовал раскрывающееся меню, которое я нашел здесь около года назад под названием «jsddm». Затем он работал над андроидами и теперь не работает над андроидами, а работает на iPhone. Может ли кто-нибудь помочь мне понять, почему? Благодаря! EDIT- Не работает, я имею в виду - он не переключается. Ссылка на галерею никого не требует. Это подменю, которое принимает пользователей в галерею. На андроидах он даже не показывает нисходящее падение. Код * Это оригинальный код (с моими моделями CSS), который я нашел здесь.

Javascript

<script type="text/javascript"> 
var timeout   = 500; 
var closetimer  = 0; 
var ddmenuitem  = 0; 

function jsddm_open() 
{ jsddm_canceltimer(); 
    jsddm_close(); 
    ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');} 

function jsddm_close() 
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');} 

function jsddm_timer() 
{ closetimer = window.setTimeout(jsddm_close, timeout);} 

function jsddm_canceltimer() 
{ if(closetimer) 
    { window.clearTimeout(closetimer); 
     closetimer = null;}} 

$(document).ready(function() 
{ $('#jsddm > li').bind('mouseover', jsddm_open); 
    $('#jsddm > li').bind('mouseout', jsddm_timer);}); 

document.onclick = jsddm_close; 
</script> 

CSS

#jsddm 
{ margin: 20px 0; 
    text-align: center; 

    } 

    #jsddm li 
    { 
     list-style: none; 
     display: inline-block; 
    } 

    #jsddm li a 
    { font-family: 'Libre Baskerville', serif; 
     text-shadow: none; 
     color:#000; 
     text-decoration: none; 
     font-weight:normal; 
     padding: 3px 10px; 

    } 

    #jsddm li a:hover 
    { color:#000; 
     text-decoration:underline;} 

     #jsddm li ul 
     { margin: 0; 
      padding: 0; 
      position: absolute; 
      visibility: hidden; 
      border-top: 1px solid white; 
      font-size:.8em;} 

      #jsddm li ul li 
      { float: none; 
       display: inline} 

      #jsddm li ul li a 
      { width: auto; 
       background: #8e7967; 
       color: #24313C} 

      #jsddm li ul li a:hover 
      { background: #fff;} 


HTML 
<ul id="jsddm"> 
    <li><a href="index.html">Home</a> 
    <li><a href="about.html">About</a> 
    <li><a href="pricing.html">Pricing</a> 
    </li> 
    <li><a href="#">Gallery</a> 
     <ul> 
      <li><a href="gameheadgallery.html">Game Heads</a></li> 
      <li><a href="birdsgallery.html">Birds</a></li> 
      <li><a href="fishgallery.html">Fish</a></li> 
      <li><a href="exoticsgallery.html">Exotics</a></li> 
      <li><a href="mammalgallery.html">Mammals</a></li> 
      <li><a href="europeans.html">Europeans</a></li> 
     </ul> 
    </li> 
    <li><a href="field.html">Field Care Video</a></li> 
    <li><a href="contact.html">Contact</a></li> 
</ul> 

Answer 1

Возможно попробовать этот вопрос Making the "jsddm" menu to list sub menus

Ответ есть то, что я буду делать - с помощью CSS вместо этого.

Вот скрипка - http://jsfiddle.net/Sjhab/

Это не мое, и я должен добавить код, чтобы добавить скрипку. Но я уверен, что это поможет:

<ul id="jsddm"> 
<li><a href="#">JavaScript</a> 
<ul> 
    <li><a href="#">Drop Down Menu</a></li> 
    <li><a href="#">jQuery Plugin</a></li> 
    <li class="b"><a href="#">Ajax Navigation</a> 
     <ul> 
      <li><a href="#">AJAXIFY</a></li> 
     </ul> 
    </li> 
</ul> 
</li> 
<li><a href="#">Effect</a> 
<ul> 
    <li><a href="#">Slide Effect</a></li> 
    <li><a href="#">Fade Effect</a></li> 
    <li><a href="#">Opacity Mode</a></li> 
    <li><a href="#">Drop Shadow</a></li> 
    <li><a href="#">Semitransparent</a></li> 
</ul> 
</li> 
<li><a href="#">Navigation</a></li> 
<li><a href="#">HTML/CSS</a></li> 
<li><a href="#">Help</a></li> 
</ul> 



#jsddm 
{ margin: 0; padding: 0} 

#jsddm li 
{ float: left; 
list-style: none; 
font: 12px Tahoma, Arial} 

#jsddm li a 
{ display: block; 
background: #20548E; 
padding: 5px 12px; 
text-decoration: none; 
border-right: 1px solid white; 
width: 70px; 
color: #EAFFED; 
white-space: nowrap} 

#jsddm li a:hover 
{ background: #1A4473} 

#jsddm li ul 
{ margin: 0; 
    padding: 0; 
    position: absolute; 
    visibility: hidden; 
    border-top: 1px solid white; 
    opacity: 0; 
} 

#jsddm > li:hover ul, 
#jsddm > li:hover ul li:hover ul 
{ 
    visibility: visible; 
    opacity: 1; 
    -webkit-transition: all .2s ease-in-out; 
    -moz-transition: all .2s ease-in-out; 
    -ms-transition: all .2s ease-in-out; 
    -o-transition: all .2s ease-in-out; 
    transition: all .2s ease-in-out;  
} 

#jsddm ul { 

-webkit-transition: all .5s ease-out .5s; 
-moz-transition: all .5s ease-out .5s; 
-ms-transition: all .5s ease-out .5s; 
-o-transition: all 5s ease-out.5s; 
transition: all .5s ease-out.5s; 
} 


#jsddm > li:hover ul li ul { 
    visibility: hidden; 
} 


#jsddm li ul li 
{ float: none; 
    display: inline; 
    position: relative; 
} 

#jsddm li ul li a 
{ width: auto; 
    background: #9F1B1B} 

#jsddm li ul li a:hover 
{ background: #7F1616}