Why is the triangle a different colour shade to the menu background?

Question

I'm not understanding as to why the triangle which appears when the mouse hovers over the menu item, does not come up the same shade of grey as the pop-up menu itself. Any clues as to whats happening here?

Both CSS attributes are set to border-bottom-colour:#eee; for the triangle, and the background colour for the menu background as background-color:#eee;. however, it still results as pictured.

#slide-down-banner ul li:hover ul.main-menu-scroll-dropdown{
    display:block;
    width:100%;
    background-color:#eee!important;
    left:0;
    right:0;
    color: black;
    border-bottom-style:solid;
    border-width:5px;
    border-color:#3A83F3;
    padding:30px;
    padding-bottom:20px;
    -webkit-box-shadow: -1px 9px 22px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: -1px 9px 22px 0px rgba(0,0,0,0.75);
    box-shadow: -1px 9px 22px 0px rgba(0,0,0,0.75);
}
#slide-down-banner ul li:hover > a:after {
    content: "";
    display: block;
    border: 12px solid transparent;
    border-bottom-color:#eee!important;
    position: absolute;
    bottom: 0px;
    left: 50%;
    margin-left: -12px;
}

Answer 1

That darker grey is caused by the box-shadow on top of the triangle:

box-shadow: -1px 9px 22px 0px rgba(0,0,0,0.75);

You might want to try and use z-index to put the triangle on top of the shadow:

#slide-down-banner ul li:hover > a:after {
    // ...
    z-index: 999;
}