So, I was working on a website and decided to implement a submenu which would become visible when the user hovers or activates a link in the main menu, using only css, no scripts.
The structure of the menu is a simple ul list and the one of the submenu a nested ul list. Below is just the code of the <li> containing the link “more” which reveals the submenu:
.
.
.
<li id="moreli"><a id="link-more" href="">More</a>
<ul id="submenu">
<li><a id="link-updates" href="blog/">Updates</a></li>
<li>...</li>
<li>...</li>
</ul>
</li>
.
.
.
Notice that the href of the link “more” is blank. I left it blank because I didn’t want to load any page with this particular link, its purpose is to bring up the submenu. Also I didn’t put inside just “#” as I wanted to avoid the reload of the same page for design purposes.
I tested this structure on my windows pc in 5 browsers (including safari), everything works great. On my android smartphone.. perfect. But my client, who has an iphone tells me “look, Zisis, the site looks wonderful, but the submenu doesn’t come up”.
Great!!
The point was that the iphone didn’t recognize the “more” link with its completely empty href as a normal link, so after clicking on it, it didn’t call up the necessary changes to the css for the submenu to appear. Putting a # inside the href would solve the problem but as mentioned before, I didn’t want the page to reload….
Luckily, very luckily, there is a workaround for this problem which makes the link behave as a link, but also it doesn’t reload the page. What’s the solution?
Just put javascript: inside the empty href. That makes the menu with its submenu look like this…
.
.
.
<li id="moreli"><a id="link-more" href="javascript:">More</a>
<ul id="submenu">
<li><a id="link-updates" href="blog/">Updates</a></li>
<li>...</li>
<li>...</li>
</ul>
</li>
.
.
.
Simple, effective, perfect. Tested on iphone and ipad.
