[Menu Bar] Overlapped Dropdown Menu

[Thuan Hai Cong Ho]

Steps to reproduce:

• Click on one of the items on the menu bar, a dropdown menu will appear.
• Hover the mouse cursor over other items on the menu bar, another dropdown menu will appear overlapping the previous one.

https://khang-nd.github.io/7.css/#menubar

Is it intentional or something that could be fixed in the future?

[Khang]

Nice spot, it's likely a bug resulting from these 2 rules combined. I'm not sure if a CSS-only fix is possible 🤷‍♂️

7.css/gui/_menu.scss

Lines 165 to 170 in 0e60346

 &:focus, 
 &:focus-within { 
   > [role="menu"] { 
     display: block; 
   } 
 } 

7.css/gui/_menu.scss

Lines 203 to 207 in 0e60346

 &.can-hover [role="menuitem"]:hover { 
   > [role="menu"] { 
     display: block; 
   } 
 } 

[Iván Pereira]

Hi @khang-nd,
Could you try this patch?
It uses :has() and general sibling combinators, so it will not be supported on IExplorer.
Regards

[Khang]

Hey @elchininet, thanks for that. Could you please create a pull request for this so a preview deployment is triggered and I'll be able to take a closer look from there?

[Iván Pereira]

Hi @khang-nd, here you go: #71
Regards