current menu item hover not working?

Question

I am trying to change the text color of my current menu item as on hover its green but the background is green so I want the color to be white on hover but it does not seem to want to work, to view hover over the selected page on 'our products'

website link

li.current-menu-item a:hover{
color:white !important;
}

Answer 1

I just checked your website and found some helpful CSS for your site.
Find this line of CSS and change your color code, it will surely work.

For menu hover and focus ('Use this CSS in bedcentregrimsby.css')

 .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
        color: #a4cb9a;
    }

Please feel free to quote. Thanks, Cheers..!!

Answer 2

In general it's not a good practice to style with !important attribute in CSS. You should try to avoid it.

You will need to find with your browser inspector which CSS rules exist to color your link on hover.

You can find information about how CSS rules overwrite them selves and what rule get's specified in the end: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

E.g.: You already have a hover state style for the link which could override your white color style:

.navbar-nav a:hover, .dropdown-menu>li>a:hover {
    color: #a4cb9a !important;
}

in http://beta2018.bedcentregrimsby.co.uk/wp-content/themes/BedCentre2/css/bedcentregrimsby.css?ver=4.9.8 at line 1006