The Radix nav menu component includes "Menu Items" which render as list item elements. But the Webstudio UI doesn't allow setting styles for hover, focus etc on these menu items. Is there any way around this, or do I have to use an HTML embed?
You can get most of the way there with the state on the button. For setting styles when the dropdown is open on the parent link follow this issue. I added custom css you can use in the meantime https://github.com/webstudio-is/webstudio/issues/3955
Thanks for the reply. This seems like a useful github issue and css example, but in this case, I wasn't looking to style anything based on open/closed state of a menu item, but simply to add pseudo-class hover, etc styles to the <li> element. Those pseudo-classes aren't available:
I was able to work around this by styling the states of the link element inside the list item, but for some other cases, it might be useful to be able to style the state of the list item itself
I do agree it's odd not to have them there. Maybe it was an oversight, but also curious what the use case is? Shouldn't any interaction styles be on the link itself?
In this case it was about hover css transition animations on nav elements, and my wanting to interact with the li was a leftover in my brain from some problem I ran into (or misunderstood) back in css2 🙃. Still, I'm sure somebody could come up with a valid use case
In this case, it might have prevented you from providing the user with the wrong visual queue. If the LI shows hover, but has padding, it might be the user is only hovering over the LI and not the trigger
Yeah, you're exactly right. Somehow that got encoded in my brain as "always try to also add hover to the li" but in this case, I just made sure the link fills its li container
