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

Question

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

三 Angular 形的两个 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

深灰色是由三 Angular 形顶部的框阴影引起的:

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

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

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