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.

enter image description here

#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

Popular posts from this blog

python Tkinter Capturing keyboard events save as one single string -

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

javascript - Z-index in d3.js -