html - Why is the triangle a different colour shade to the menu background? -
i'm not understanding why triangle appears when mouse hovers on menu item, not come same shade of grey pop-up menu itself. clues whats happening here?
both css attributes set border-bottom-colour:#eee;
triangle, , background colour menu background background-color:#eee;
. however, still results 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; }
that darker grey caused box-shadow on top of triangle:
box-shadow: -1px 9px 22px 0px rgba(0,0,0,0.75);
you might want try , use z-index
put triangle on top of shadow:
#slide-down-banner ul li:hover > a:after { // ... z-index: 999; }
Comments
Post a Comment