Menu item disappears or turns white...white menu/background

When hovering over a menu item, the menu item (parent) turns white and no longer is visible. I have a white background and have made the menu bar white. How do I fix this? I have tried several CSS styling codes but I believe they are being overridden.

When on the current page, the corresponding menu also disappears or turns white.

I am also having problems changing the color when hovering over the sub menu (children).

I would like the current page menu item to be #2cadda or may be interested in making it yellow. When hovering over a menu (parent) item, I would like that color to be #2cadda. I may be interested in changing the sub menu (children) items hover color so the appropriate CSS for that would be appreciated as well. Please help! Thanks

 

Hello,

Please share the link of your website.

 

Paste this code in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

#menu li.current_page_item a {
color:red;
}
#menu li a:hover{
color:red;
}
#menu li.current-menu-item a:hover, #menu li.current-menu-parent a:hover, #menu li.current_page_parent a:hover, #menu li a:hover.selected {
color:red;
}

Inplace of "red" put your color code.

 

Nevermind. I got it. Your code is missing some !important CSS.