I realise there are a number of questions / answers referring to HOVER not working on iPad but I think my problem is slightly different.
My problem is that the HOVER works fine on desktop and only part works on the iPad (touch devices). What I mean by that is that if I touch one of the lists on the NAV bar on iPad it works fine but if I choose another list on the NAV bar it does not work - (I have inconsistent behaviour)
I am using CSS / HTML (cannot program in jquery)
So on APPLE devices if I touch the STEAM TOURS part of the NAV the drop down appears fine. Same for LUXURY TOURS. But will not work for GENERAL or ENTHUSIASTS TOURS. However it all works on the desktop as expected and it works on my Android phone
Here is my HTML
- Rail Tour Guide
- Steam Rail Tours
- Luxury Tours
- Enthusiasts Tours
- General
Here is the CSS
/* Navigation Style */
.dropdown { position:relative; font-family: arial, sans-serif; width:100%; height:35px; border:1px solid #666666; font-size:14px; color:#ffffff; background:#333333; z-index:2; }
/* Basic List Styling (First/Base Level) */
.dropdown ul {padding:0; margin:0; list-style: none;}
.dropdown ul li {float:left; position:relative;}
.dropdown ul li a { border-right:1px solid #666666; padding:0px 8px 0px 8px;line-height:35px;display:block; text-decoration:none; color:#000; text-align:center; color:#fff;}
.dropdown ul li a:hover {color:#ffffff; background:#232323;}
/* Second Level Drop Down Menu */
.dropdown ul li ul {display: none;}
.dropdown ul li:hover ul { font-size:13px; display:block; position:absolute; border-top:1px solid #666666; top:35px; min-width:150px; left:0;}
.dropdown ul li:hover ul li a {display:block; background:#000; color:#ffffff; width:170px; }
.dropdown ul li:hover ul li a:hover {background:#666666; color:#ffffff;}
/* Third Level Drop Down Menu */
.dropdown ul li:hover ul li ul {display: none;}
.dropdown ul li:hover ul li:hover ul { display:block; position:absolute; left:145px; top:0; }
#container {
overflow:hidden;
background:#F8ECC2;
width:1000px;
padding 0px 0px 0px 0px;
margin: 0 auto;
}
.topbox {
background:#FFFFFF;
height:60px;
}
.topbox a {
color:black;
text-decoration:none;
margin-left:20px;
font-size:25px;
font-family:'Rock Salt';
}
Here is a jsfiddle