SOLVED: Hover item problem in nav widget (nestable)

Bugs
3

Hey @HOSEIN,

this is actually harder than I initially thought. The easy fix I was thinking about was to just add an overflow of hidden to the sub menus. But this would break nested sub menus. So at the moment you have the following options:

1. If you have only one level of sub menus you can go the overflow route using some custom CSS:

root .sub-menu { overflow: hidden }

2. If you have multiple levels you can do the following:

2a. Set the sub menu’s background-color to transparent. Set the background-color (default and hover) you want to use on your sub menu items instead.
2b. Set the border-radius using some custom CSS:

root .sub-menu > li:first-child {
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
}

root .sub-menu > li:last-child {
  border-bottom-right-radius: 1em;
  border-bottom-left-radius: 1em;
}

Let me know if that helps.

Best,

André

1 Like