Question

I have a pure CSS implementation of horizontal menus that works fine on browsers on a computer. The website is http://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: <a href="#">About Us</a>

View this on a mobile device:

http://jsfiddle.net/tlaverdure/L42AE/