CSS hovers are not working on touch devices

there is no such thing on tablets like hover :)
you should use click events...

Hi HainKurt - the issue is not occurring on tablet/mobile. It is occurring only on touch screen laptops when the user mouses over the navigation item.

do you have a link to the site...

https://goo.gl/iwpDzp

put this on your page and test

console.log (('ontouchstart' in document))

Select allOpen in new window

what is your OS?

a simple demo

https://jsfiddle.net/723eaLch/

is this working fine in your test pcs/browsers?

your page have some JS errors, fix that one before going further

Uncaught ReferenceError: MktoForms2 is not defined
    at (index):364

<script>MktoForms2.loadForm("//app-sj07.marketo.com", "155-NBF-513", 1759);</script>

Select allOpen in new window

The OS is windows 10 and it is happening in all browsers, *only* on these touch screen laptops. it is so weird. Let me give that a shot and report back.

what tool/library are you using on this nav bar?

no dice on the console.log (('ontouchstart' in document)) test. going to look into the JS issue now

on which page did you find this error? I can't find it on the homepage or a few others that I checked

Uncaught ReferenceError: MktoForms2 is not defined
    at (index):364

<script>MktoForms2.loadForm("//app-sj07.marketo.com", "155-NBF-513", 1759);</script>

please ignore that error :)

Uncaught ReferenceError: MktoForms2 is not defined
    at (index):364

Select allOpen in new window

it is coming from my AD Blocker, which blocked some part of your page and your js failed because of that...
If I disable AD Blocker, no error on your page...

got it, ok thanks.

what happens if you disable touch pad on that pc?
or detach mouse? any difference in behavior?

in chrome, emulation window, you can add many devices and debug your page

check this screenshotthen here, play with settings, or add a custom device and see what property of the device is causing this issue...

what happens if you disable touch pad on that pc?
or detach mouse? any difference in behavior?

No difference

Would you mind expanding that screenshot a little bit so I can see where you grabbed the emulation window? I have been trying to find that tab for 2 hours and just can't find it

https://www.dropbox.com/s/tij8xumo4rzeeg1/Screenshot%202017-08-21%2013.08.15.png?dl=0
Here is what I see

nevermind, I found it. still can't figure out how to fix it, though.

I am convinced this is a OS/hardware issue. thanks for a second set of eyes.

The reason that hovers work on mobile devices is because they're touch-first devices. Laptops and desktops are mouse-first devices. Whatever is the primary pointing device gets the hover.

HainKurt's first answer is the most technically correct. When designing an interface that needs to be usable on a touch device, you should be using clicks and toggles instead of hovers.