CSS Dropdown Menu on iPad - css

Question

I have a CSS drop-down menu that works perfectly on mouse hover but that only partly works on iPad & iPhone. Tapping the drop-down works the first time but fails on subsequent taps until the home link is tapped, which 'resets' the menu. Seems weird to me but maybe someone will recognize this behavior. The menu can be viewed at http://raleighfutbol4all.com/
<div id="menu">
<ul>
<li><a class="link" href="http://raleighfutbol4all.com">Home</a></li>
<li><a class="sm_parent" onClick="return true">Program</a>
<ul>
<li><a class="link" href="/program.php">Methods</a></li>
<li><a class="link" href="/schedule.php">Schedule</a></li>
<li><a class="link" href="locations.php">Locations</a></li>
<li><a class="link" href="reading.php">Reading</a></li>
</ul>
</li>
<li><a class="link" class="titlebar" href="contact.php">Contact</a></li>
<li><a class="sm_parent" onClick="return true">About</a>
<ul>
<li><a class="link" href="/about.php">The Coaches</a></li>
<li><a class="link" href="/mission.php">Mission Statement</a></li>
<li><a class="link" href="/testimonials.php">Testimonials</a></li>
<li><a class="link" href="/gallery.php">Gallery</a></li>
</ul>
</li>
</ul>
</div> <!-- menu -->
CSS:
#menu
{
display: block;
position: absolute;
white-space:nowrap;
z-index: 3;
}
#menu a.link:hover
{
color: #ffffff;
border: 1px solid #FFE135;
border-radius: 6px;
margin: 0px; /* needed to offset 1px border */
}
#menu a.sm_parent:hover /* sm_parent = submenu parent, has no link */
{
cursor: default;
}
#menu > ul /* top level ul only */
{
padding-left: 15px;
padding-right: 15px;
margin: 0;
}
#menu ul /* all ul's*/
{
display: inline-table;
position: relative;
list-style: none;
z-index: 3;
}
#menu ul li
{
float: left;
text-align: left;
}
#menu ul li a
{
display: block;
padding: 4px 20px;
color: #FFE135;
text-decoration: none;
margin: 1px; /* hover will replace this with 1px border, prevents shifting */
z-index: 3;
}
#menu ul li a:link { color: #FFE135; }
#menu ul li a:visited { color: #FFE135; }
#menu ul li a:active { color: #FFE135;}
#menu ul li:hover > ul
{
visibility: visible;
opacity: 1.0;
}
#menu ul li ul
{
visibility: hidden;
opacity: 0.0;
-webkit-transition: all 0.4s ease-in-out 0.0s;
-moz-transition: all 0.4s ease-in-out 0.0s;
-ms-transition: all 0.4s ease-in-out 0.0s;
-o-transition: all 0.4s ease-in-out 0.0s;
transition: all 0.4s ease-in-out 0.0s;
}
#menu ul ul
{
display: block;
background: black;
border-radius: 8px;
padding: 2px 8px;
position: absolute;
z-index: 3;
/*
top: 100% works with Chrrome, etc but not with IE, (of course) but not with
margin and or border values adding margin & border values between top menu (ul)
and submenu (ul) will require more % value deduction
*/
top: 88%;
}
#menu ul ul li
{
display: block;
position: relative;
float: none;
}
#menu ul ul > li
{
/* submenus with slightly smaller font */
font-size: 90%;
}
#menu ul ul li a
{
padding: 4px 10px;
}
#menu ul ul ul
{
/* 2nd generation submenu open to right of 1st generation dropdown submenus */
position: absolute; left: 100%; top:0;
}
#menu ul ul ul > li
{
/* This prevents 2nd generation > submenus from having ever diminishing font size*/
font-size: 100%;
}

Answer 1

First i noticed website is not responsive. most of the time drop downs not good for the Mobile equipment like IPod,Ipad and Android mobile. but if you can make responsive website with menu. you can get very good touch friendly user experience.
Here example mobile navigation : http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly