I have created a CSS navigation menu that has a drop down menu in it. I have made my site responsive to tablets and mobiles. I originally used this HTML for the top level of the menu;
<a><li>Our Services</li></a> (This link was not going to be set up to go to any other webpage, just to act as an anchor for the other items underneith)
This code works fine for all PC browsers (including Safari) and worked fine on Android devices, but when I tested it on an iphone the menu would not work. I found a discussion saying that you need to put in a href for the <a> tag in order for this to work on iphone. So I tried this;
<a href=""><li>Our Services</li></a>
This made it work on iphone but it stopped working on Android.
I have since had to use a # inside the href like this;
This makes it work on all the mobile browsers, but it comes with the problem that it is refreshing the webpage and becuase the menu is a little way down the page, it takes you back to the top of the screen. I have even tried to <li> and id and used the id after the # in the href like this;
< href="#link1"><li id="link1">Our Services</li></a>
This does work to some degree but it still refeshes the page.
Can anyone tell me how to get touch devices to not react badly to make this work?
Supports touch devices. On Android, iOS, Windows Phone 7 and IE10 (with touchscreen), first touch will open an associated submenu, second will follow the link. Mouse and keyboard accessibility works as normal.
Thanks for your replya SnakEyes02,
The menu isn't far down the page (on mobile phone), but the reaction when hovered (or touched on a mobile device) isn't what I want. I did read somewhee that adding a blank onClick event can help. Such as;
<a onClick=""> Is this the type of thing that your mean?
I have also added a "Blind" effect to another menu with Dreamweaver a fair way down the page that reacts badly on desktops because I have tried to get around the problem on mobile devices with hover not working by using the "href=""".
Thanks again for heling,