Responsive Menu Bug

Hi Web Experts,

I’ve found a menu on W3Schools which would probably suit my website quite well, because it’s lite (and has very little JavaScript and no external links except font-awesome which I can easily workaround), is 2 level, simple and responsive (using a hamburger menu).  Here’s the info on it, and here’s the demo.

It seems to work quite well except for some minor problems (some of which I might be able to work around myself), but one problem I don’t know how to fix is:

If I add more “Dropdown” menus (which I’ve done here), then on my phone click “Dropdown 1”, then change my mind and click “Dropdown 2”, it opens “Dropdown 2” so I can see the items under it, but within a second it automatically takes the 3rd option under the “Dropdown 2” menu (“Link 2C”).  (I guess this is related to the fact that “Link 2C” appears in the same position that “Dropdown 2” was before I clicked “Dropdown 2”.)  This problem happens on my phone (Samsung J7) in both browsers (Chrome and Samsung “Internet”), and I've also noticed it on a Samsung J5 and old Samsung Gio.  (No such problem occurs if I click "Dropdown 2" then "Dropdown 1".)

Is anyone able to offer a fix for this, please?

Thanks.
tel2
LVL 12
tel2Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Zakaria AcharkiAnalyst DeveloperCommented:
It's a common problem comes from dropdown menu hover on mobile browsers, since the hover option doesn't work in touch devices as in the desktop, take a look at :

https://stampede-design.com/blog/dropdown-menu-hover/#.XDyn0lxKiM8

To prevent this you could use click instead of hover.

Working sample using jQuery

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
tel2Author Commented:
Hi Zakaria,

Nice work!  It seems to work well, thank you for your time and effort!
And it even makes things nicer by closing a dropdown menu when I tap it a 2nd time on my phone.

I might use your solution if I can't find a better option, but any ideas how I can make it so it works without jQuery?  I'm trying to make this as lite as possible, as implied at the top of my original post.

Ideally it would be nice if the non-touch devices could just hover to dropdown the menus, but I guess that's where the 1st link you gave me comes in.
tel2Author Commented:
Having not heard anything more from anyone about this, I've now closed this and awarded points to Zakaria.

Thanks again for your solution, Zakaria!

I might ask for a more light alternative on another site sometime, although your solution is reasonably light.

tel2
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.