SOLVED: Submenu item background color applied to li instead of a

Bricks Version: 1.4


When setting color and background color on hover and CSS transition to submenu items links, there’s a glitch because background color is not applied to links but to li wrappers: there is no transition on background color changes.

I think background color should be applied to a tags and not li wrappers.

Quick fix:

.sub-menu li {
    transition: var(--same-transition-as-submenu-links);

Hi Yan,
Thank you very much for your report!

Can you please show the “glitch”? For me, it looks smooth overall:

Best regards,

How did you set the transition?
Can you try with a 1s duration?

all 0.35s ease


OK I understand :slight_smile:
I was setting transition with this:

a {
  transition: bla bla bla;

So it didn’t include li wrappers in menu, and I had no transition on background color.

But the CSS transition property on menu element seems to set BOTH transitions and a AND li wrappers. So it is not pure CSS, there is some processing behind it, isn’t there?
Is this CSS transition option specific for each element?

In 1.3.6 or 1.3.7 the animations were time-shifted - how exactly we fixed this I can’t say anymore, but hey: it works :sweat_smile:

I can mark the post as solved, right?

Yes time shift appears with nested elements like li a in some situations (when changing same inherited property, like text color, in both elements).
So, if background-color was applied to a tag instead of li, it would be healthier and safer.

But I guess we can live with that for now, since the menu transition works like that.

Maybe a blue warning to explain how it works?