Drop down kompabilitet

Hej
har gjort en fin drop down meny som jag är väldigt nöjd över. Bara det att när jag testar den i iPhony för att se hur den skulle se ut i mobilen (eller iPhone iaf) så verkar det vara vajsing på undermenyerna.
Dom glider ner när man håller pekarn typ mitt på skärmen istället för på menyraden.
Det är altså bara div:s och css kodning jag gjort.
Är det möjligt att få till utan javascript eller liknande?

Så är ser css koden ut iaf:
HTML:
<div id='cssmenu'>
<ul>
<li class="active"><a href='index.html'><span>Start</span></a></li>
<li class="has-sub"><a href='#'><span>Klubben</span></a>
<ul>
<li><a href='workfiles/styrelse.html'><span>Styrelse</span></a></li>
<li><a href='workfiles/kommitteer.html'><span>Kommittéer</span></a></li>
<li><a href='workfiles/valberedning.html'><span>Valberedning</span></a></li>
<li><a href='workfiles/revisorer.html'><span>Revisorer</span></a></li>
<li><a href='workfiles/hitta_hit.html'><span>Hitta hit</span></a></li>
<li><a href='workfiles/kontakta_oss.html'><span>Kontakta oss</span></a></li>

  \</ul\>

</li>

Css:
#cssmenu ul, #cssmenu li,
#cssmenu span, #cssmenu a { margin: 0; padding: 0; }

#cssmenu {
background: #f5f5f0;
box-shadow: inset 0 2px 4px rgba(132, 135, 100, 0.5);
-moz-box-shadow: inset 0 2px 4px rgba(132, 135, 100, 0.5);
-webkit-box-shadow: inset 0 2px 4px rgba(132, 135, 100, 0.5);

}

#cssmenu:after { content:''; display: block; clear: both; }

#cssmenu a {
display: inline-block;
font-family: Calibri, Arial, sans-serif;
color: #FFF; text-decoration: none;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
transition: all 0.2s;
}
#cssmenu a:hover { background: #939974; }

#cssmenu ul {
list-style: none;
height: 25px;
padding:5px 10px 0 10px;

}
#cssmenu > ul > li {
float: left;
height: 25px;
margin: 0 15px;
position: relative;
}
#cssmenu > ul > li > a {
background: #848764;
box-shadow: inset 1px 1px 3px rgba(20,20,18,0.2);
-moz-box-shadow: inset 1px 1px 3px rgba(20,20,18,0.2);
-webkit-box-shadow: inset 1px 1px 3px rgba(20,20,18,0.2);
border-top-right-radius: 17px;

\-moz-border-top-right-radius: 17px;
\-webkit-border-top-right-radius: 17px;
line-height: 15px;
padding: 5px 10px;

}
#cssmenu > ul > li.active a {
background: #121310;
color: #f5f5f0;
}

#cssmenu .has-sub ul {
background: #f5f5f0;
border: 1px solid #939974;
border-top: 0 none;
height: 0; overflow: hidden;
padding: 0; position: absolute;
opacity: 0; top: 26px; left: 0;
width: 200%;

\-webkit-transition: opacity 0.2s;
\-moz-transition: opacity 0.2s;
\-o-transition: opacity 0.2s;
\-ms-transition: opacity 0.2s;
transition: opacity 0.2s;

}
#cssmenu .has-sub:after {
content: '';
display: block;
padding: 0 10px;
position: absolute;
bottom: -10px; left: 0;
height: 10px; width: 200%;
}

#cssmenu .has-sub:hover ul {
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
height: auto;
opacity: 1;
padding: 10px;
}

#cssmenu .has-sub li,
#cssmenu .has-sub li a { padding: 0 5px; width: 100%; }
#cssmenu .has-sub li { margin: 8px 0; }
#cssmenu .has-sub li a {
color: #848764;
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
}
#cssmenu .has-sub li a:hover { color: #FFF;}