Hover CSS on right hand menu

I have my right-hand menu (RHM) to be change color to a green when the mouse is hovered over it as per the image.

I need the top item in the RHM to do the same, I can’t find the specific CSS field on inspect?

Can somebody tell me what to write and where?

Thanks

Hi,

Try adding this CSS code to your website’s Additional CSS.

    .widget .product_list_widget li {
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
    }

    .widget .product_list_widget li:hover {
      background-color: #bbe6b8;
    }

Regards,
Kharis
aThemes Support

Hi Kharis,

That works, but needs a bi more padding on the left side to match the hover effect on the lower menus, as per the image attached.

How did you learn to do this, it looks so complicated?

ThanksScreen Shot 2021-03-01 at 23.42.41

Try replacing the code to

    .widget .product_list_widget li {
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
      padding: 10px !important;
    }

    .widget .product_list_widget li:hover {
      background-color: #bbe6b8;
    }

Regards,
Kharis
aThemes Support

Perfect, thanks :slight_smile:

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support