Mouse hover effect on custom themes about react-sidemenu HOT 2 CLOSED

Hello, to style the custom menu, please take a look at the file less/theme-default.less. In there you can see how to style the menu in a default-theme consistent way. For your particular case
`.Side-menu-default {

@color-blue-darkest: #1A2226;
@color-blue-dark: #222D32;
@color-grey-light: #B8C7CE;
@color-grey-dark: #4A636E;
@color-blue-light: #C4EAF2;

.item {

&:hover {
  > .item-title {
    color: white;

    a {
      color: white;
    }
  }
}

&.item-level-1 {
  &:hover {
    >.item-title {
      background-color: lighten(@color-blue-darkest, 20%);
    }
  }

  &:hover, &.active {
    border-left: 4px solid @color-blue-light;
  }
}

}
}`
this is the section that handles hover state styling. You can apply general styling to all of the menu items using the class "item", but can also override level specific styling with classes like "item-level-1" (set the number to the level - deepness of items you want to style). Hope that solves your issue!

from react-sidemenu.

Thanks.

from react-sidemenu.