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

Question

我不理解为什么鼠标悬停在菜单项上时出现的三角形与弹出菜单本身没有相同的灰色阴影。关于这里发生的任何线索？

三角形的两个CSS属性都设置为border-bottom-colour:#eee;，菜单背景的背景颜色设置为background-color:#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;
}

Answer 1

深灰色是由三角形顶部的盒子阴影引起的：

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

您可能想尝试使用z-index将三角形放在阴影顶部：

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