I have struggled like years now with pure CSS dropdown menus on touch devices. But then, a few days ago I found this wonderful jQuery plugin.
I'd really recommend removing your old ideas, include this script to your project and get lucky with just one line of code :)
$('#navi li:has(ul)').doubleTapToGo();
EDIT
Unfortunately jsFiddle is either down or maintained (patch tuesday). I tested the jQuery plugin with up to 4 levels and it works perfect!!!!
Here is a quite large bunch of code, but as I said, jsFiddle doesn't work at the moment.
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="doubletaptogo.js"></script>
<script>
$(document).ready(function() { console.log('ready'); $('li:has(ul)').doubleTapToGo();});
</script>
<style>
* {
margin:0px;
padding:0px;
}
body * {
display:block;
}
ul li {
width:200px;
height:100px;
float:left;
position:relative;
background-color:red;
}
ul li ul {
top:100px;
left:0px;
display:none;
position:absolute;
}
ul li:hover > ul {
display:block;
}
ul li ul li {
position:relative;
background-color:green;
}
ul li ul li ul {
top:0px;
left:200px;
width:10000px;
}
ul li ul li ul li {
float:left;
position:relative;
background-color:blue;
}
ul li ul li ul li ul {
top:100px;
left:0px;
width:200px;
}
ul li ul li ul li ul li {
background-color:yellow;
}
ul li ul li ul li:hover > ul {
display:block;
}
</style>
</head>
<body>
<ul>
<li>
test 1
</li>
<li>
test 1
<ul>
<li>
test 2.1
<ul>
<li>
test 2.1
</li>
<li>
test 3.2
</li>
</ul>
</li>
<li>
test 2.2
<ul>
<li>
test 3.1
</li>
<li>
test 3.2
<ul>
<li>
test 3.1
</li>
<li>
test 3.2
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>