Navbar focus state issue

Hi –

I would like to add a focus state to the dropdown triggers in my navbar, so that the menu items are visible for people navigating with a keyboard. Problem is, if you do that, the menu looks like garbage for everyone else – when you hover across the menu, the focus state stays frozen on the last dropdown after you move away from it.

Does anyone have any idea how to make the navbar keyboard accessible friendly without making the hover ugly for everyone else?

I made an example so you can see what I’m talking about: https://nav-demo-focus-state.webflow.io/

Thanks!


Here is my site Read-Only: https://preview.webflow.com/preview/nav-demo-focus-state?utm_medium=preview_link&utm_source=dashboard&utm_content=nav-demo-focus-state&preview=9a8e997636366ec8cd5d1d8dc99c2305
(how to share your site Read-Only link)