How to remove the hover in menu

Can you post a link to your site?

The site is still being built so pardon me if it’s messy.
https://ant-workshops.co.il/main/

Also, when I change the top margin value to any other number in px (see below) the menu stops working (links don’t show as links any more). How weird is that.

.main-navigation {
	margin: 20px 20px 20px 20px;
}

This appears to be the CSS code that is setting the hover background color to white:

.theme-color-green .cat-links a:hover, .theme-color-green .comments-link a:hover, .theme-color-green .main-navigation ul ul li, .theme-color-green .main-navigation ul li.hover, .theme-color-green .main-navigation ul li:hover {
    background-color: #FFFFFF;
}

Right now, the links seem to be working, but they are covered up partway by the content section. Is that what you are trying to address with changing the margins?

I “pushed” the content +sidebar sections lower and also the menu, via the margin value.
It totally screwed up the functionality of the menu. As if after some height the menu stops working. Could it be because it’s within the header section?

I changed the code you mentioned to transparent and to #000 and nothing happened.
I tried *everything*!

You’re in advanced CSS customization territory, so I’m not sure how much I can help, but you might try using a clear fix on the #masthead to see if that allows the menu to appear. Or try setting the same amount of padding instead of a margin.

Beyond that, I would revert any changes to the header that are causing the problem and play around with it in Firebug until you get it to look the way you want.

Thanks Caroline!
I have been playing in firebug forever.
Unfortunately the changes just don’t appear properly in other browsers, and all the margin/padding plays turn into menu running far out the main div.
I did revert the changes on the menu to the original CSS.

Plus, the white hover on the menu just can’t be changed, which so weird and frustrating.

The hover color seems to be coming from several places in various stylesheets so that’s probably making it hard to track down and/or override. Try adding this to your child stylesheet:

.main-navigation li:hover > a {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.1);
}
.main-navigation ul ul *:hover > a {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.1);
}
.main-navigation ul ul a:hover {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.1);
}

Change the color to what your want – changing to hex is probably easier/better. And if it does not work, try adding the !important to each one.

Also, if you are having browser inconsistencies, a good troubleshooting step is always to validate for coding errors:

https://codex.www.ads-software.com/Validating_a_Website

Gosh, thanks so much.
Your code with !important worked like a charm.
And thanks for the important tip about validating the code. I’ll start using that from now on.

You don’t have a solution to the other menu issue, by chance?

Glad that worked – CSS can get tricky when you have lots of stylesheets and then the !important can be helpful (though, in general, it’s best to use it as minimally as possible).

Where do you want the menu to be / look? Obviously, right now it’s not okay, but where do you want it to move to?

I wanted it attached to the left bottom of the header, but couldn’t get it work in all browsers. So I gave up and tried to place it in a gap I created between the header and content.
I created the gap via top margins of the content, and the menu. BUT- If I move the top margins of the menu (see code I mentioned above), the menu stops function and the links don’t show as links any more. So weird and could not solve that.
The theme is great but gives me so many complications ??

Seems like you got it sorted? It looks to be working (at least in Firefox)?

I just did!
After so many hours of tries.
Thanks you all for the help and support. This community is a great help.