Dropdown menu css

Can you explain what the issue is?

the problem is the menu item PROJECTS.. when i hover on it, there is a submenu popping up and it has a white background, pink border and the highlight of the menu item is going beyond the frame of the box.
I would like to change the white background to the color of the main background or at least get rid of the border line. ALso would like to fix the size of the highlight.

is going beyond the frame of the box.

This is caused by your Custom CSS in Siteorigin:

.menu li {
    display: inline-block;
    float: none;
    margin-left: -5px;
}

Specifically this line:

    margin-left: -5px;

If you still want to keep that Custom CSS, then make sure to only apply it to top-level navigation items and not dropdown items using the ‘greater than’ selector:

.menu > li {
    display: inline-block;
    float: none;
    margin-left: -5px;
}

Otherwise remove that line.

I would like to change the white background to the color of the main background or at least get rid of the border line.

In the “Additional CSS” section of the dashboard add this:

@media screen and (min-width: 48em) {

    .colors-custom #site-navigation ul ul {
        border: none;
        background: red;
    }
}

https://codex.www.ads-software.com/CSS#Custom_CSS_in_WordPress

great! all worked except for the little triangle which still appears when hovering over the “projects” menu item.. the triangle background is white and has a pink frame; could you pls help with the css for changing that?
thanks!

Instead of what I recommended when I said “In the “Additional CSS” section of the dashboard add this”, try adding this:

@media screen and (min-width: 48em) {

    .colors-custom #site-navigation ul ul {
        border: none;
        background: #eae6e7;
    }

    .main-navigation ul li.menu-item-has-children.focus:before, 
    .main-navigation ul li.menu-item-has-children:hover:before, 
    .main-navigation ul li.menu-item-has-children.focus:after, 
    .main-navigation ul li.menu-item-has-children:hover:after, 
    .main-navigation ul li.page_item_has_children.focus:before, 
    .main-navigation ul li.page_item_has_children:hover:before, 
    .main-navigation ul li.page_item_has_children.focus:after, 
    .main-navigation ul li.page_item_has_children:hover:after {
        display: none;
    }
}

thank you! works perfectly