CSS horizontal menus don't work on touch devices - css

Question

I have a pure CSS implementation of horizontal menus that works fine on browsers on a computer. The website is www.intercessionsp.org. However, on touch devices (specifically, I have tried Safari on iPad and iPhone), the menus do not work. Touching them causes no response at all, if there is a submenu (the Home menu item works fine). I have tried to implement two solutions:
1. using onclick="return true", based on terraling's solution in "iPad/iPhone Touch Event on Hover CSS" question here on stackoverflow.
2. adding #ios ul { display: none; } and #ios li:hover ul { display: block; } based on a post by Philip Renich on elfboy.com called "Making CSS Drop Down Menus Work on the iPhone".
Neither worked.
Here is the relevant part of my css file:
/* horizontal menus */
#nav, .nav, #nav .nav li {
margin:0px;
padding:0px;
}
#nav li {
float:left;
display:inline;
cursor:pointer;
list-style:none;
padding:10px 30px 10px 30px;
border:1px #000 solid;
position:relative;
background: #990000;
}
#nav li ul.first {
left:-1px;
top:100%;
}
li, li a {
color:#fff;
text-decoration:none;
}
#nav .nav li {
width:100%;
text-indent:10px;
line-height:30px;
margin-right:10px;
border-top:1px #000 solid;
border-bottom:1px #000 solid;
border-left:none;
border-right:none;
background:#990000;
onclick="return true"
}
#nav li a {
display:block;
width:inherit;
height:inherit;
}
ul.nav {
display:none;
}
#nav li:hover > a, #nav li:hover {
color:#990000;
background:#fff;
}
li:hover > .nav {
display:block;
position:absolute;
width:200px;
top:-2px;
left:30%;
z-index:1000;
border:1px #000 solid;
}
li:hover {
position:relative;
z-index:2000;
}
#basic li {
color:#000;
}
Since I already have display:block in my li:hover > .nav, I tried adding it to #nav li:hover > a, #nav li:hover (without expecting this one to work) and to li:hover, but neither worked. I should add that I looked at Renich's comment about setting a width value, but since I already had width values set, this didn't appear to be useful.
I would like to stay with a pure CSS implementation.

Answer 1

Your menu relies on the css selector :hover in order to show the list items. In order for those to show on a mobile device like an iphone the user must be able to click. You can try wrapping the text on the first level on your menu with <a> tags. For example: About Us
View this on a mobile device:
http://jsfiddle.net/tlaverdure/L42AE/