Max Max - 4 months ago 11
CSS Question

Ancher font-size in dropdown menu changes in mobile browsers

I have created a CSS/HTML-only dropdown menu. When a mouse hovers over the parent link, the hidden dropdown menu appears. It worked fine in most settings except for Android devices since Android has no :hover alternative and the first click on a parent takes you to the parent link.

To overcome this problem, I tried changing the URL of the parent links to

javascript:void(0)
so that the parent is not clickable, and the menu can open on click. I didn't get a chance to test it on an Android device yet, but on my iPhone it seems that the dropdown links with JS as URL suddenly have a smaller font-size compared to the other links. On my desktop, the font-size stays the same like any other link.


  • Why is Safari on iPhone making the font-size smaller for links with javascript in the URL or making the font-size bigger for links with no javascript in the URL?

  • How can I avoid this behavior?



Full code & working example on JSFiddle: https://jsfiddle.net/fL4xj3jc/

<ul class="topmenu_parent">
<li class="topmenu_link"><a href="home/index">Home</a></li>
<li class="topmenu_link dropdown_button">
<a href="javascript:void(0)" class="dropdown_parent">Account</a>
<div class="dropdown_links">
<a href="users/profile/1">Mijn profiel</a>
<a href="users/edit/email">Bewerk e-mail</a>
<a href="users/edit/password">Bewerk wachtwoord</a>
<a href="users/search">Zoek gebruiker</a>
</div>
</li>
<li class="topmenu_link dropdown_button">
<a href="javascript:void(0)" class="dropdown_parent">Berichten</a>
<div class="dropdown_links">
<a href="messages/inbox">Inkomend</a>
<a href="messages/outbox">Uitgaand</a>
<a href="messages_create/form">Nieuw bericht</a>
</div>
</li>
<li class="topmenu_link dropdown_button">
<a href="javascript:void(0)" class="dropdown_parent">Pronostiek</a>
<div class="dropdown_links">
<a href="predictions/index/1">Jupiler Pro League</a>
<a href="predictions/index/2">Champions League (voorronde)</a>
</div>
</li>
<li class="topmenu_link dropdown_button">
<a href="javascript:void(0)" class="dropdown_parent">Scorebord</a>
<div class="dropdown_links">
<a href="predictions/score/1">Jupiler Pro League</a>
<a href="predictions/score/2">Champions League (voorronde)</a>
</div>
</li>
<li class="topmenu_link"><a href="home/faq">FAQ</a></li>
<li class="topmenu_link"><a href="home/logout">Log uit</a></li>
</ul>


Desktop:
enter image description here

Mobile:
enter image description here

Answer

The difference is link with drop down menus is displayed inline-block

Updated fiddle

So do this change

.topmenu_link
{
    margin: 0px 50px 0px 0px;
    display: inline-block;
}

/* you can delete this rule */
/* li.dropdown_button
{
    display: inline-block;
} */