#top-menu a:before{content:"";position:absolute;top:-68px;left:-10px;width:calc(100% + 20px);background:red;z-index:-1;border-radius:4px;height:120px;transform:skewY(0deg);transition:.4s ease-in-out all}#top-menu a:hover:before{top:-60px;transform:skewY(20deg)}#top-menu a:hover{color:#fff;opacity:1}#top-menu li:nth-child(1) a:before{background:purple}#top-menu li:nth-child(2) a:before{background:#fc6a3c}#top-menu li:nth-child(3) a:before{background:#f1be52}#top-menu li:nth-child(4) a:before{background:#71b953}#top-menu li:nth-child(5) a:before{background:#017a8d}#top-menu li:nth-child(6) a:before{background:green}#top-menu li:nth-child(5) a{color:#fff}