How to change color of mega menu eidget

To change the hover color, modify this with CSS:

.menu-item > a:hover {
background-color: #fff;
}

To modify the border color (not sure where you want to modify it, but if you want to change the border around the entire widget, try this:)

.widget_nav_mega_menu.shortcode-mega-menu {
border: 1px solid black;
}

To modify the background color, you can change it through CSS here:
.widget_nav_mega_menu.shortcode-mega-menu {
background-color: #fff;
}

You can try a more general CSS class like this for the hover:

.btn.btn-color-alt, .button.btn-color-alt, button.btn-color-alt, .added_to_cart.btn-color-alt, input.btn-color-alt[type=”submit”], .btn.btn-color-alt:hover, .btn.btn-color-alt:focus, .button.btn-color-alt:hover, .button.btn-color-alt:focus, button.btn-color-alt:hover, button.btn-color-alt:focus, .added_to_cart.btn-color-alt:hover, .added_to_cart.btn-color-alt:focus, input.btn-color-alt[type=”submit”]:hover, input.btn-color-alt[type=”submit”]:focus, .btn.btn-color-alt.btn-style-bordered:hover, .btn.btn-color-alt.btn-style-bordered:focus, .button.btn-color-alt.btn-style-bordered:hover, .button.btn-color-alt.btn-style-bordered:focus, button.btn-color-alt.btn-style-bordered:hover, button.btn-color-alt.btn-style-bordered:focus, .added_to_cart.btn-color-alt.btn-style-bordered:hover, .added_to_cart.btn-color-alt.btn-style-bordered:focus, input.btn-color-alt.btn-style-bordered[type=”submit”]:hover, input.btn-color-alt.btn-style-bordered[type=”submit”]:focus, .widget_nav_mega_menu .menu > li:hover, .mega-navigation .menu > li:hover {
background-color: #fff;
}

1. Modify this ome:
.widget_nav_mega_menu .widget-title.color-scheme-light {
background-color: rgba(0, 0, 0, 0.23);
color: #fff;
}

2. Try this:

.mega-navigation .menu > li > a, .widget_nav_mega_menu .menu > li > a {
color: #000;
}