Pure CSS menu drop down Not working iOS

Pure CSS menu drop down Not working iOS

I have a pure css menu drop down, works great in everything but not iOS
(iPhone or iPad) http://jsfiddle.net/kibblewhite/n7Fbt/embedded/result/
HTML:
<ul class="navigation">
<li class="sub">
<span class="navigation-entry-title" alt="Home"
title="Home">Home</span>
<ul class="navigation-dropdown">
<li><a href="#">Home Page</a></li>
<li><a href="#">First Time Student</a></li>
<li><a href="#">What is Swing Dancing?</a></li>
</ul>
</li>
<li class="sub">
<span class="navigation-entry-title" alt="Classes"
title="Classes">Classes</span>
<ul class="navigation-dropdown">
<li><a href="#">Courses</a></li>
<li><a href="#">Our Agenda &amp; Time Table</a></li>
<li><a href="#">Workshops</a></li>
<li><a href="#">Curriculum</a></li>
<li><a href="#">Venues</a></li>
</ul>
</li>
<li class="sub">
<span class="navigation-entry-title" alt="Events">Events</span>
<ul class="navigation-dropdown">
<li><a href="#">Socials</a></li>
<li><a href="#">Performances</a></li>
<li><a href="#">Competitions</a></li>
<li><a href="#">Stepping Out</a></li>
<li><a href="#">Camps</a></li>
</ul>
</li>
<li class="sub">
<span class="navigation-entry-title" alt="">Team</span>
<ul class="navigation-dropdown">
<li><a href="#">Teachers</a></li>
<li><a href="#">Join Our Troupe</a></li>
<li><a href="#">Join our Team</a></li>
</ul>
</li>
<li class="sub">
<span class="navigation-entry-title" alt="">Hire Us</span>
<ul class="navigation-dropdown">
<li><a href="#">Planning an event?</a></li>
<li><a href="#">Privates</a></li>
<li><a href="#">Wedding Dances</a></li>
<li><a href="#">Schools and Youth Projects</a></li>
</ul>
</li>
<li class="sub">
<span class="navigation-entry-title" alt="">Media</span>
<ul class="navigation-dropdown">
<li><a href="#">Resource</a></li>
<li><a href="#">Press Release</a></li>
<li><a href="#">Photo Galleries</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Announcements</a></li>
</ul>
</li>
</ul>
CSS:
body {
background-color: DimGrey;
}
ul.navigation {
margin: 0;
list-style: none;
}
ul.navigation > li.sub {
float: left;
position: relative;
padding: 3px 10px 5px 10px;
margin: 0;
font-family: 'Lato', sans-serif;
}
ul.navigation > li.sub > span {
color: ivory;
text-decoration: none;
}
ul.navigation > li.sub > span.navigation-entry-title {
text-transform: uppercase;
}
/** the symbol before the navigation entry */
ul.navigation > li.sub > span.navigation-entry-title:before {
content: "\00BB";
letter-spacing: 3px;
}
ul.navigation > li.sub > ul.navigation-dropdown {
position: absolute;
list-style: none;
top: -1000em;
opacity: 0;
transition: opacity .38s ease-in-out;
-moz-transition: opacity .38s ease-in-out;
-webkit-transition: opacity .38s ease-in-out;
box-shadow: 0 2px 6px grey;
-moz-box-shadow: 0 2px 6px grey;
-webkit-box-shadow: 0 2px 6px grey;
padding: 0;
min-width: 180px;
}
ul.navigation > li.sub > ul.navigation-dropdown > li {
background-color: white;
white-space: nowrap;
padding: 8px 32px 8px 18px;
border-top: 1px dotted #999;
font-size: small;
}
ul.navigation > li.sub > ul.navigation-dropdown > li > a {
text-decoration: none;
color: #999;
}
ul.navigation > li.sub > ul.navigation-dropdown > li > a:hover {
color: black;
}
/** what to do whilst hovering over the menu entry */
ul.navigation > li.sub:hover {
background: #34152C;
cursor: pointer;
}
ul.navigation > li.sub:hover > ul.navigation-dropdown {
left: 0;
top: 26px;
opacity: 0.94;
display: block;
}
The two issues I'd like to address is:
The menu fails to appear when you click/hover/focus on the menu item
If I surround the span menu items with tags, which I'm trying to avoid at
all costs, but then the menu drop down fails to close when I click
anywhere else on the screen anyways, so it fails in so many ways.
Any help would be greatly welcomed.