Where are you adding that css? It could be that it’s being overridden by a more specific style. You could narrow the specificity by adding higher-level identifiers. Or you could try adding the !important argument. If you can post a link to your site I can take a look.
I added the custom css via the Jetpack plugin.
The website I am working on is barbersbrand.com.
I have already added hover effects with css, but i am having trouble adding it to the current menu item as I mentioned earlier.