@import url('https://fonts.googleapis.com/css?family=Titillium+Web:400,600,700'); a { font-weight: 700; text-decoration: none; text-transform: uppercase; position: relative; color: #333; padding: 10px 0px; letter-spacing: 1px; font-size: 12.5px; } .menu { margin: auto; position: fixed; position: absolute; width: 100%; text-align: center; padding: 8px 2rem; height: 70px; font-family: 'Titillium Web', sans-serif; } .menu ol { padding-left: 0px; } .logo { float: left; position: absolute; top: 10px; left: 2rem; width: 60px; height: 50px; } .search { float: right; position: absolute; top: 25px; right: 12rem; stroke: #333; width: 20px; height: 20px; } .cart { float: right; position: absolute; top: 25px; right: 6rem; stroke: #333; height: 20px; } .menu-item { list-style-type: none; display: inline; position: relative; margin: 15px; font-family: 'Titillium Web', sans-serif; } .menu-item:before { position: absolute; content: ""; border-bottom: 3px solid #333; overflow: hidden; width: 0%; left: 50%; top: 40px; transition: 0.2s ease-in-out 0.15s; } .menu-item:hover:before { width: 100%; left: 0%; transition: 0.2s ease-in-out; } .sub-menu { position: absolute; left: 0%; background: #fff; font-family: 'Titillium Web', sans-serif; top: 50px; padding: 0; text-align: left; box-shadow: 0px 4px 20px -5px rgba(0, 0, 0, 0.15); width: 150px; opacity: 0; transition: 0.45s ease all 0.1s; z-index: 0; -webkit-transform: translateY(20px); transform: translateY(20px); opacity: 0; transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) all 0.1s; visibility: hidden; } .menu-item:nth-child(n + 3):nth-child(-n + 5):hover .sub-menu { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); opacity: 1; transition-delay: 0.15s; visibility: visible; } .sub-menu .menu-item { display: block; font-family: 'Titillium Web', sans-serif; } .menu-item:nth-child(n + 3):nth-child(-n + 5) .plus-icon { width: 15px; height: 15px; stroke: #333; margin-left: 2px; margin-bottom: -5px; } .menu-item:nth-child(n + 3):nth-child(-n + 5) .sub-menu-item { list-style-type: none; display: block; margin: 15px; position: relative; opacity: 0; transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) all 0.1s; visibility: hidden; } .menu-item:nth-child(n + 3):nth-child(-n + 5):hover .sub-menu { opacity: 1; } .menu-item:nth-child(n + 3):nth-child(-n + 5):hover .sub-menu-item a { transition: 0.15s ease all; } .menu-item:nth-child(n + 3):nth-child(-n + 5):hover .sub-menu-item a:hover { color: grey; } .menu-item:nth-child(n + 3):nth-child(-n + 5):hover .sub-menu-item { -webkit-transform: translateY(0px); transform: translateY(0px); opacity: 1; transition-delay: 0.15s; visibility: visible; }