为什么三角形与菜单背景的颜色不同？-Whyisthetriangleadifferentcolourshadetothemenubackground?

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.

两个CSS属性都设置为border-bottom-color:#eee;对于三角形,菜单背景的背景颜色为背景颜色:#eee;。然而,它仍然如图所示。

#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;
}

1 个解决方案

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

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