A good-looking sliding dropdown mega menu inspired by Stripe.com.
Create with Vanilla JavaScript and CSS/CSS3.
See Also:
How to use it:
1. Create the HTML for the menu.
<nav class="topnavBar">
<div class="dropdownBackground">
<span class="arrow"></span>
</div>
<ul class="nav-bar">
<li>
<a href="#">Products</a>
<div class="dropdown products">
<section class="cols-wrapper">
<section class="cols-sections">
<ul class="list-container">
<span class="col-title">Payments</span>
<li class="list-item">
<svg class="menu-sub-icon" width="40" height="40" viewBox="0 0 40 40" fill="none"
xmlns="http://www.w3.org/2000/svg">
<title>Payments logo</title>
<path
d="M34.61 11.28a2.56 2.56 0 0 0-1.22-1.04L8.54.2A2.57 2.57 0 0 0 5 2.6V15c0 1.05.64 2 1.61 2.4l6.44 2.6 21.56 8.72c.26-.4.4-.88.39-1.36V12.64c0-.48-.13-.96-.39-1.37z"
fill="url(#product-icon-payments-SiteMenu-a)"></path>
<path
d="M34.63 11.28L13.06 20l-6.45 2.6A2.58 2.58 0 0 0 5 25v12.42a2.58 2.58 0 0 0 3.54 2.39L33.4 29.76c.5-.21.93-.57 1.21-1.04.26-.41.4-.88.39-1.36V12.64c0-.48-.12-.95-.37-1.36z"
fill="#96F"></path>
<path
d="M34.62 11.28l.1.17c.18.37.28.77.28 1.19v-.03 14.75c0 .48-.13.95-.39 1.36L13.06 20l21.56-8.72z"
fill="url(#product-icon-payments-SiteMenu-b)"></path>
<defs>
<linearGradient id="product-icon-payments-SiteMenu-a" x1="20" y1="4.13" x2="20" y2="21.13"
gradientUnits="userSpaceOnUse">
<stop stop-color="#11EFE3"></stop>
<stop offset="1" stop-color="#21CFE0"></stop>
</linearGradient>
<linearGradient id="product-icon-payments-SiteMenu-b" x1="35" y1="11.28" x2="35" y2="28.72"
gradientUnits="userSpaceOnUse">
<stop stop-color="#0048E5"></stop>
<stop offset="1" stop-color="#9B66FF"></stop>
</linearGradient>
</defs>
</svg>
<a href="#" class="nav-link-dropdown">Payments<br /><span class="sub-link-menu">Online payments</span>
</a>
</li>
<li class="list-item">
<svg class="menu-sub-icon" width="40" height="40" viewBox="0 0 40 40" fill="none"
xmlns="http://www.w3.org/2000/svg">
<title>Payments logo</title>
<path
d="M34.61 11.28a2.56 2.56 0 0 0-1.22-1.04L8.54.2A2.57 2.57 0 0 0 5 2.6V15c0 1.05.64 2 1.61 2.4l6.44 2.6 21.56 8.72c.26-.4.4-.88.39-1.36V12.64c0-.48-.13-.96-.39-1.37z"
fill="url(#product-icon-payments-SiteMenu-a)"></path>
<path
d="M34.63 11.28L13.06 20l-6.45 2.6A2.58 2.58 0 0 0 5 25v12.42a2.58 2.58 0 0 0 3.54 2.39L33.4 29.76c.5-.21.93-.57 1.21-1.04.26-.41.4-.88.39-1.36V12.64c0-.48-.12-.95-.37-1.36z"
fill="#96F"></path>
<path
d="M34.62 11.28l.1.17c.18.37.28.77.28 1.19v-.03 14.75c0 .48-.13.95-.39 1.36L13.06 20l21.56-8.72z"
fill="url(#product-icon-payments-SiteMenu-b)"></path>
<defs>
<linearGradient id="product-icon-payments-SiteMenu-a" x1="20" y1="4.13" x2="20" y2="21.13"
gradientUnits="userSpaceOnUse">
<stop stop-color="#11EFE3"></stop>
<stop offset="1" stop-color="#21CFE0"></stop>
</linearGradient>
<linearGradient id="product-icon-payments-SiteMenu-b" x1="35" y1="11.28" x2="35" y2="28.72"
gradientUnits="userSpaceOnUse">
<stop stop-color="#0048E5"></stop>
<stop offset="1" stop-color="#9B66FF"></stop>
</linearGradient>
</defs>
</svg>
<a href="#" class="nav-link-dropdown">Payments<br /><span class="sub-link-menu">Online payments</span>
</a>
</li>
<li class="list-item">
<svg class="menu-sub-icon" width="40" height="40" xmlns="http://www.w3.org/2000/svg" fill="none">
<path fill="url(#product-icon-payment-links-SiteMenu-a)"
d="M1.001 0a1 1 0 00-.93 1.366l2.857 7.268a1 1 0 010 .732L.07 16.634A1 1 0 001.001 18h16.631a2 2 0 001.861-1.268l2.753-7a2 2 0 000-1.464l-2.753-7A2 2 0 0017.633 0H1z" />
<path fill="url(#product-icon-payment-links-SiteMenu-b)"
d="M1.001 0a1 1 0 00-.93 1.366l2.857 7.268a1 1 0 010 .732L.07 16.634A1 1 0 001.001 18h16.631a2 2 0 001.861-1.268l2.753-7a2 2 0 000-1.464l-2.753-7A2 2 0 0017.633 0H1z"
opacity=".25" />
<path fill="#96F"
d="M10.001 9a1 1 0 00-.93 1.366l2.857 7.268a1 1 0 010 .732L9.07 25.634A1 1 0 0010.001 27h16.631a2 2 0 001.861-1.268l2.753-7a2 2 0 000-1.464l-2.753-7A2 2 0 0026.633 9H10z" />
<path fill="#0048E5"
d="M22.384 9a2 2 0 01-.138.732l-2.753 7A2 2 0 0117.633 18h-5.636a1 1 0 00-.07-.366L9.07 10.366A1 1 0 0110.001 9h12.383z" />
<path fill="url(#product-icon-payment-links-SiteMenu-c)"
d="M10.001 9a1 1 0 00-.93 1.366l2.857 7.268a1 1 0 010 .732L9.07 25.634A1 1 0 0010.001 27h16.631a2 2 0 001.861-1.268l2.753-7a2 2 0 000-1.464l-2.753-7A2 2 0 0026.633 9H10z" />
<defs>
<linearGradient id="product-icon-payment-links-SiteMenu-a" x1="11.377" x2="11.258" y1=".294"
y2="18" gradientUnits="userSpaceOnUse">
<stop offset=".226" stop-color="#11EFE3" />
<stop offset="1" stop-color="#21CFE0" />
</linearGradient>
<linearGradient id="product-icon-payment-links-SiteMenu-c" x1="24.033" x2="11.648" y1="16.5"
y2="5.719" gradientUnits="userSpaceOnUse">
<stop stop-color="#96F" />
<stop offset="1" stop-color="#96F" stop-opacity="0" />
</linearGradient>
<radialGradient id="product-icon-payment-links-SiteMenu-b" cx="0" cy="0" r="1"
gradientTransform="matrix(-7.0001 -13.49994 16.78746 -8.70477 14.033 13.5)"
gradientUnits="userSpaceOnUse">
<stop offset=".094" stop-color="#fff" />
<stop offset="1" stop-color="#fff" stop-opacity="0" />
</radialGradient>
</defs>
</svg>
<a href="#" class="nav-link-dropdown">Payments Links<br /><span class="sub-link-menu">No-code
payments</span>
</a>
</li>
<li class="list-item">
<svg class="menu-sub-icon" width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M12.5 1A2.5 2.5 0 0010 3.5v32.831a2.5 2.5 0 01-1.853 2.415l28-7.506A2.5 2.5 0 0038 28.825V3.5A2.5 2.5 0 0035.5 1h-23z"
fill="#00D924" />
<path
d="M1.253 24.548a2.5 2.5 0 00-.915 3.415l5.477 9.486a2.5 2.5 0 002.812 1.165l26.147-7.006-10.187-17.645a2.5 2.5 0 00-3.415-.915l-19.919 11.5z"
fill="url(#product-icon-invoicing-SiteMenu-a)" />
<path
d="M8.402 38.663c.075-.013.15-.03.225-.05l26.147-7.005-10.187-17.645a2.5 2.5 0 00-3.415-.915L10 19.498V36.33a2.5 2.5 0 01-1.598 2.332z"
fill="url(#product-icon-invoicing-SiteMenu-b)" />
<defs>
<linearGradient id="product-icon-invoicing-SiteMenu-a" x1="17.39" y1="20.25" x2="17.389" y2="38"
gradientUnits="userSpaceOnUse">
<stop stop-color="#FFD748" />
<stop offset="1" stop-color="#FFC148" />
</linearGradient>
<linearGradient id="product-icon-invoicing-SiteMenu-b" x1="21.589" y1="12.712" x2="21.588"
y2="38.663" gradientUnits="userSpaceOnUse">
<stop stop-color="#00A600" />
<stop offset="1" stop-color="#00D924" />
</linearGradient>
</defs>
</svg>
<a href="#" class="nav-link-dropdown">Invoicing<br /><span class="sub-link-menu">Online
invoices</span>
</a>
</li>
</ul>
</section>
<section class="cols-sections">
<ul class="list-container">
<span class="col-title">Financial services</span>
<li class="list-item">
<svg class="menu-sub-icon" width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M7.62 26.48l-.02-.03a2.44 2.44 0 01-.7-1.48 2.49 2.49 0 01.11-1.05c.05-.28.13-.54.24-.77l.08-.17L14.67 10h21.85A2.52 2.52 0 0139 12.37l.01.16v22.92A2.52 2.52 0 0136.67 38l-.16.01H19a2.5 2.5 0 00.64-1.97c-.07-.66-.43-1.09-.95-1.47l-.15-.1-10.62-7.73-.14-.1v-.01l.14.1a2.52 2.52 0 01-.27-.21l-.03-.03z"
fill="url(#product-icon-issuing-SiteMenu-a)" />
<path
d="M22.05 2.1c.7-.15 1.41 0 1.99.41l6.56 4.72a2.5 2.5 0 01.92 2.8V10l-8.5 26-.05.2-.03.08-.03.09-.15.32-.02.04-.19.29-.03.04a2.9 2.9 0 01-.23.25l-.03.02a2.24 2.24 0 01-.58.4l-.03.03c-.1.05-.2.1-.31.13h-.05l-.33.08h-.05a2.3 2.3 0 01-.36.03H3.53A2.53 2.53 0 011 35.45v-22.9C1 11.14 2.13 10 3.53 10H16.6l3.8-6.7a2.5 2.5 0 011.46-1.15l.18-.05z"
fill="#0073E6" />
<path
d="M31.38 10l-8.37 26-.02.1-.02.1-.03.08-.03.09-.07.16-.08.16-.02.04-.1.15-.09.14-.03.04-.11.13-.12.12-.03.02c-.08.09-.17.16-.26.23l-.15.1-.17.08-.03.02-.15.07-.16.06h-.05l-.16.05-.1.01.1-.1c.4-.51.59-1.17.51-1.82-.07-.66-.43-1.09-.95-1.47l-.15-.1-10.62-7.73-.14-.1a2.54 2.54 0 01-.26-.26l-.04-.05a2.48 2.48 0 01-.12-.14l-.02-.04-.03-.04a2.43 2.43 0 01-.17-.3l-.03-.06a2.5 2.5 0 01-.15-.42l-.01-.07-.02-.1-.01-.06a2.51 2.51 0 01.05-1.01l.02-.09a2.5 2.5 0 01.04-.1c.03-.25.1-.5.21-.74l.1-.17L16.66 10h14.71z"
fill="url(#product-icon-issuing-SiteMenu-b)" />
<defs>
<linearGradient id="product-icon-issuing-SiteMenu-a" x1="22.92" y1="11.68" x2="22.92" y2="39.68"
gradientUnits="userSpaceOnUse">
<stop offset=".1" stop-color="#FF80FF" />
<stop offset=".39" stop-color="#FF7BF9" />
<stop offset=".77" stop-color="#FF6EEA" />
<stop offset="1" stop-color="#FF62DC" />
</linearGradient>
<linearGradient id="product-icon-issuing-SiteMenu-b" x1="31.38" y1="27.93" x2="11.62" y2="27.93"
gradientUnits="userSpaceOnUse">
<stop stop-color="#0073E6" />
<stop offset="1" stop-color="#00299C" />
</linearGradient>
</defs>
</svg>
<a href="#" class="nav-link-dropdown">Issuing<br /><span class="sub-link-menu">Card creation</span>
</a>
</li>
</ul>
</section>
<section class="cols-sections">
<ul class="list-container">
<span class="col-title">Financial services</span>
<li class="list-item">
<svg class="menu-sub-icon" width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M7.62 26.48l-.02-.03a2.44 2.44 0 01-.7-1.48 2.49 2.49 0 01.11-1.05c.05-.28.13-.54.24-.77l.08-.17L14.67 10h21.85A2.52 2.52 0 0139 12.37l.01.16v22.92A2.52 2.52 0 0136.67 38l-.16.01H19a2.5 2.5 0 00.64-1.97c-.07-.66-.43-1.09-.95-1.47l-.15-.1-10.62-7.73-.14-.1v-.01l.14.1a2.52 2.52 0 01-.27-.21l-.03-.03z"
fill="url(#product-icon-issuing-SiteMenu-a)" />
<path
d="M22.05 2.1c.7-.15 1.41 0 1.99.41l6.56 4.72a2.5 2.5 0 01.92 2.8V10l-8.5 26-.05.2-.03.08-.03.09-.15.32-.02.04-.19.29-.03.04a2.9 2.9 0 01-.23.25l-.03.02a2.24 2.24 0 01-.58.4l-.03.03c-.1.05-.2.1-.31.13h-.05l-.33.08h-.05a2.3 2.3 0 01-.36.03H3.53A2.53 2.53 0 011 35.45v-22.9C1 11.14 2.13 10 3.53 10H16.6l3.8-6.7a2.5 2.5 0 011.46-1.15l.18-.05z"
fill="#0073E6" />
<path
d="M31.38 10l-8.37 26-.02.1-.02.1-.03.08-.03.09-.07.16-.08.16-.02.04-.1.15-.09.14-.03.04-.11.13-.12.12-.03.02c-.08.09-.17.16-.26.23l-.15.1-.17.08-.03.02-.15.07-.16.06h-.05l-.16.05-.1.01.1-.1c.4-.51.59-1.17.51-1.82-.07-.66-.43-1.09-.95-1.47l-.15-.1-10.62-7.73-.14-.1a2.54 2.54 0 01-.26-.26l-.04-.05a2.48 2.48 0 01-.12-.14l-.02-.04-.03-.04a2.43 2.43 0 01-.17-.3l-.03-.06a2.5 2.5 0 01-.15-.42l-.01-.07-.02-.1-.01-.06a2.51 2.51 0 01.05-1.01l.02-.09a2.5 2.5 0 01.04-.1c.03-.25.1-.5.21-.74l.1-.17L16.66 10h14.71z"
fill="url(#product-icon-issuing-SiteMenu-b)" />
<defs>
<linearGradient id="product-icon-issuing-SiteMenu-a" x1="22.92" y1="11.68" x2="22.92" y2="39.68"
gradientUnits="userSpaceOnUse">
<stop offset=".1" stop-color="#FF80FF" />
<stop offset=".39" stop-color="#FF7BF9" />
<stop offset=".77" stop-color="#FF6EEA" />
<stop offset="1" stop-color="#FF62DC" />
</linearGradient>
<linearGradient id="product-icon-issuing-SiteMenu-b" x1="31.38" y1="27.93" x2="11.62" y2="27.93"
gradientUnits="userSpaceOnUse">
<stop stop-color="#0073E6" />
<stop offset="1" stop-color="#00299C" />
</linearGradient>
</defs>
</svg>
<a href="#" class="nav-link-dropdown">Issuing<br /><span class="sub-link-menu">Card creation</span>
</a>
</li>
</ul>
</section>
<section class="cols-sections">
<ul class="list-container">
<span class="col-title">Business operations</span>
<li class="list-item">
<svg class="menu-sub-icon" width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M24.87 4.46a1.26 1.26 0 00-1.8.2l-4.6 5.82L3.42 29.45c.27.22.54.45.78.7a9.42 9.42 0 011.13 1.32l.1.13a9.15 9.15 0 01.8 1.43c.29.62.5 1.28.65 1.95a2.5 2.5 0 002.45 1.93H38.7a1.27 1.27 0 001.27-1.3 42.43 42.43 0 00-15.1-31.15z"
fill="#9A66FF" />
<path
d="M27.8 21.98A33.82 33.82 0 005.95 4.28a1.29 1.29 0 00-1.56.98L.1 25.4a2.54 2.54 0 001.4 2.88 9.48 9.48 0 012.72 1.87l.17.17c.35.36.67.74.96 1.15l.1.13a9.15 9.15 0 01.8 1.43l20.94-9.31a1.29 1.29 0 00.62-1.74z"
fill="url(#product-icon-radar-SiteMenu-a)" />
<path
d="M18.46 10.48l.47.38a33.82 33.82 0 018.87 11.12 1.29 1.29 0 01-.62 1.74L6.25 33.03a9.15 9.15 0 00-.8-1.43l-.1-.13-.23-.3a8.5 8.5 0 00-.74-.85 9.7 9.7 0 00-.95-.86l15.03-18.98z"
fill="url(#product-icon-radar-SiteMenu-b)" />
<defs>
<linearGradient id="product-icon-radar-SiteMenu-a" x1="13.98" y1="4.24" x2="13.98" y2="33.03"
gradientUnits="userSpaceOnUse">
<stop offset=".26" stop-color="#FF5091" />
<stop offset=".91" stop-color="#E03071" />
</linearGradient>
<linearGradient id="product-icon-radar-SiteMenu-b" x1="15.68" y1="10.48" x2="15.68" y2="33.03"
gradientUnits="userSpaceOnUse">
<stop stop-color="#6E00F5" />
<stop offset="1" stop-color="#9860FE" />
</linearGradient>
</defs>
</svg>
<a href="#" class="nav-link-dropdown">Radar<br /><span class="sub-link-menu">Fraud & risk
management</span>
</a>
</li>
<li class="list-item">
<svg class="menu-sub-icon" width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 35V7a3 3 0 015.48-1.69L21.2 21 9.32 38H8a3 3 0 01-3-3z"
fill="url(#product-icon-sigma-SiteMenu-a)" />
<path d="M8.06 4h25.16a1.5 1.5 0 011.1 2.51L21.15 21 5.84 4.92A3 3 0 018.05 4z"
fill="url(#product-icon-sigma-SiteMenu-b)" />
<path d="M7.88 38H33.2a1.5 1.5 0 001.11-2.51L21.11 21 7.14 36.33A1 1 0 007.88 38z" fill="#9A66FF" />
<defs>
<linearGradient id="product-icon-sigma-SiteMenu-a" x1="13.1" y1="38" x2="13.1" y2="12.99"
gradientUnits="userSpaceOnUse">
<stop stop-color="#9860FE" />
<stop offset="1" stop-color="#6E00F5" />
</linearGradient>
<linearGradient id="product-icon-sigma-SiteMenu-b" x1="20.28" y1="8.42" x2="20.28" y2="19.47"
gradientUnits="userSpaceOnUse">
<stop stop-color="#FF5091" />
<stop offset="1" stop-color="#E03071" />
</linearGradient>
</defs>
</svg>
<a href="#" class="nav-link-dropdown">Payments<br /><span class="sub-link-menu">Online payments</span>
</a>
</li>
<li class="list-item">
<svg class="menu-sub-icon " width="40" height="40" viewBox="0 0 40 40" fill="none"
xmlns="http://www.w3.org/2000/svg">
<title>Payments logo</title>
<path
d="M34.61 11.28a2.56 2.56 0 0 0-1.22-1.04L8.54.2A2.57 2.57 0 0 0 5 2.6V15c0 1.05.64 2 1.61 2.4l6.44 2.6 21.56 8.72c.26-.4.4-.88.39-1.36V12.64c0-.48-.13-.96-.39-1.37z"
fill="url(#product-icon-payments-SiteMenu-a)"></path>
<path
d="M34.63 11.28L13.06 20l-6.45 2.6A2.58 2.58 0 0 0 5 25v12.42a2.58 2.58 0 0 0 3.54 2.39L33.4 29.76c.5-.21.93-.57 1.21-1.04.26-.41.4-.88.39-1.36V12.64c0-.48-.12-.95-.37-1.36z"
fill="#96F"></path>
<path
d="M34.62 11.28l.1.17c.18.37.28.77.28 1.19v-.03 14.75c0 .48-.13.95-.39 1.36L13.06 20l21.56-8.72z"
fill="url(#product-icon-payments-SiteMenu-b)"></path>
<defs>
<linearGradient id="product-icon-payments-SiteMenu-a" x1="20" y1="4.13" x2="20" y2="21.13"
gradientUnits="userSpaceOnUse">
<stop stop-color="#11EFE3"></stop>
<stop offset="1" stop-color="#21CFE0"></stop>
</linearGradient>
<linearGradient id="product-icon-payments-SiteMenu-b" x1="35" y1="11.28" x2="35" y2="28.72"
gradientUnits="userSpaceOnUse">
<stop stop-color="#0048E5"></stop>
<stop offset="1" stop-color="#9B66FF"></stop>
</linearGradient>
</defs>
</svg>
<a class="nav-link-dropdown" href="#">Sigma<br /><span class="sub-link-menu">Custom reports</span>
</a>
</li>
</ul>
</section>
</section>
</div>
</li>
<li>
<a href="#">Use cases</a>
<ul class="dropdown usecases">
<li>
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<path fill="var(--iconLightColor, var(--iconHoverLightColor, #0A2540))" fill-rule="evenodd"
d="M5.43 6L5.1 7.22a3 3 0 005.8 1.56L11.64 6H15a1 1 0 010 2l-.9 7.11a1 1 0 01-1 .89H2.9a1 1 0 01-1-.89L1 8a1 1 0 110-2h4.43zM9.61.02l.97.26a.5.5 0 01.35.6L9.57 6l-.6 2.26a1 1 0 01-1.94-.52l2-7.45a.5.5 0 01.58-.27z" />
</svg>
<a class="nav-link-dropdown" href="#">E-commerce <br /><span class="sub-link-menu sub-pad">Unity online
and in-person payments</span></a>
</li>
<li>
<svg width="15" height="15" xmlns="http://www.w3.org/2000/svg">
<path
d="M1.88 0h11.25C14.15 0 15 .84 15 1.88v11.25c0 1.03-.84 1.87-1.88 1.87H1.88A1.88 1.88 0 010 13.12V1.88C0 .83.84 0 1.88 0zm8.97 4.22h.63a.7.7 0 000-1.4H8.2a.7.7 0 00-.7.7v2.34a.7.7 0 001.4 0V4.53a3.28 3.28 0 01.47 5.66v1.6a4.69 4.69 0 001.48-7.57zm-6.7 6.64h-.63a.7.7 0 000 1.4H6.8a.7.7 0 00.7-.7V9.22a.7.7 0 00-1.4 0v1.32a3.28 3.28 0 01-.47-5.65v-1.6a4.69 4.69 0 00-1.48 7.57z"
fill="var(--iconLightColor, var(--iconHoverLightColor, #0A2540))" fill-rule="evenodd" />
</svg>
<a class="nav-link-dropdown" href="#">SaaS <br /><span class="sub-link-menu sub-pad">Managing
recurrinbg billing and subscriptions</a>
</li>
<li>
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<path
d="M13.57 7.65c-.71 0-1.4-.27-1.94-.74-.52.46-1.2.74-1.93.74s-1.42-.27-1.94-.74c-.54.46-1.23.74-1.94.74-.74 0-1.43-.27-1.95-.74a3.02 3.02 0 01-2.86.59 1.86 1.86 0 01-.49-.21v7.17c0 .32.28.6.6.6h7.55V9.8c0-.11.1-.2.2-.2h3.14c.11 0 .2.1.2.2v5.26h2.15c.33 0 .6-.28.6-.6V7.29c-.14.1-.3.16-.49.2-.27.1-.58.16-.9.16zM6.83 11.7c0 .12-.1.2-.2.2H3.51a.2.2 0 01-.2-.2V9.8c0-.12.1-.2.2-.2h3.1c.12 0 .2.1.2.2v1.9h.02zm8.31-8.32L13.04.42c-.2-.26-.5-.42-.82-.42h-8.9a1 1 0 00-.82.42L.38 3.38c-.25.34-.38.77-.38 1.2 0 .86.5 1.7 1.32 1.94.92.28 1.78-.1 2.24-.79.15-.22.47-.22.64 0 .34.53.95.89 1.62.89a1.9 1.9 0 001.61-.89c.15-.22.48-.22.64 0 .34.53.95.89 1.62.89a1.9 1.9 0 001.61-.89c.15-.22.48-.22.64 0 .44.69 1.3 1.07 2.24.79.82-.25 1.32-1.1 1.32-1.95.02-.42-.11-.83-.36-1.19z"
fill="var(--iconLightColor, var(--iconHoverLightColor, #0A2540))" fill-rule="evenodd" />
</svg>
<a class="nav-link-dropdown" href="#">Marketplaces <br /><span class="sub-link-menu sub-pad">Pay out
globally and facilitate multipart payments</a>
</li>
<li>
<svg width="14" height="16" xmlns="http://www.w3.org/2000/svg">
<path
d="M6.98 0a.52.52 0 00-.25.08L.24 4.03a.5.5 0 00-.24.43c0 .17.1.33.24.42l6.49 3.95c.17.1.37.1.54 0l6.49-3.95a.5.5 0 00.24-.42.5.5 0 00-.24-.43L7.27.08a.52.52 0 00-.3-.08zm-5.5 6.82l-1.24.76A.5.5 0 000 8c0 .17.1.33.24.42l6.49 3.96c.17.1.37.1.54 0l6.49-3.96A.5.5 0 0014 8a.5.5 0 00-.24-.42l-1.25-.76-4.7 2.86a1.58 1.58 0 01-1.62 0l-4.7-2.86zm0 3.54l-1.24.76a.5.5 0 00-.24.43c0 .17.1.33.24.42l6.49 3.95c.17.1.37.1.54 0l6.49-3.95a.5.5 0 00.24-.42.5.5 0 00-.24-.43l-1.25-.76-4.7 2.87a1.58 1.58 0 01-1.62 0l-4.7-2.87z"
fill="var(--iconLightColor, var(--iconHoverLightColor, #0A2540))" />
</svg>
<a class="nav-link-dropdown" href="#">Platforms <br /><span class="sub-link-menu sub-pad">Lets customer
accept payments within our platform</span></a>
</li>
</ul>
</li>
<li>
<a href="#">Pricing</a>
<ul class="dropdown pricing">
<li>
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<path
d="M8 16A8 8 0 118 0a8 8 0 010 16zm.17-10.25c.71 0 1.62.26 2.34.65V4.18a6.28 6.28 0 00-2.34-.47c-1.9 0-3.21 1-3.21 2.66 0 2.61 3.58 2.19 3.58 3.3 0 .44-.35.59-.88.59-.78 0-1.76-.35-2.55-.78v2.25c.88.37 1.74.56 2.55.56 1.96 0 3.28-.97 3.28-2.67 0-2.8-3.6-2.3-3.6-3.36 0-.36.33-.5.83-.5z"
fill="var(--iconLightColor, var(--iconHoverLightColor, #0A2540))" />
</svg>
<a class="nav-link-dropdown" href="#">Free</a>
</li>
</ul>
</li>
</ul>
</nav>2. The necessary CSS styles.
/*General settings*/
html {
box-sizing: border-box;
font-family: "Roboto", Arial, sans-serif;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
min-height: 100vh;
}
/*nav bar settings*/
nav {
position: relative;
perspective: 600px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
.nav-bar>li {
position: relative;
display: flex;
justify-content: center;
}
.nav-bar>li>a {
color: #000;
font-size: 1em;
padding: 10px 20px;
margin: 20px;
text-decoration: none;
display: inline-block;
}
.nav-link-dropdown,
.sub-link-menu {
padding-left: 15px;
}
.sub-link-menu {
color: #afafaf;
white-space: nowrap;
}
.sub-link-menu:hover {
color: #565656;
}
.dropdown {
opacity: 0;
display: none;
position: absolute;
overflow: hidden;
padding: 20px;
top: -20px;
border-radius: 2px;
transition: all 0.5s;
transform: translateY(100px);
will-change: opacity;
}
/*general link settings*/
.dropdown a {
text-decoration: none;
color: #000;
}
a.button {
background: black;
display: block;
padding: 10px;
color: white;
margin-bottom: 10px;
}
/*first submenu settings*/
.menu-sub-icon {
width: 40px;
height: 40px;
float: left;
}
.menu-sub-main-text {
margin-left: 15px;
}
.cols-wrapper {
display: flex;
}
.cols-sections>.list-container>.col-title {
font-size: 0.8em !important;
float: left !important;
text-transform: uppercase;
display: block;
margin-bottom: 50px;
text-align: left !important;
}
.cols-wrapper>.cols-sections {
display: inline-block !important;
padding: 0;
}
.list-container {
padding: 0;
margin: 0 auto;
list-style: none;
display: inline-block;
}
.list-item {
padding: 10px 0 10px 0;
width: 260px;
height: auto;
margin: 0 auto;
line-height: 20px;
color: #000;
font-size: 0.8em;
text-align: left;
float: left;
}
/*trigger events settings*/
.trigger-enter .dropdown {
display: block;
}
.trigger-enter-active .dropdown {
opacity: 1;
}
.dropdownBackground {
width: 100px;
height: 100px;
position: absolute;
background: #fff;
border-radius: 4px;
box-shadow: 0 50px 100px rgba(50, 50, 93, 0.1), 0 15px 35px rgba(50, 50, 93, 0.15), 0 5px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s, opacity 0.1s, transform 0.2s;
transform-origin: 50% 0;
display: flex;
justify-content: center;
opacity: 0;
}
.dropdownBackground.open {
opacity: 1;
}
.arrow {
position: absolute;
width: 15px;
height: 15px;
display: block;
background: white;
transform: translateY(-50%) rotate(45deg);
}
/*second and third submenu settings*/
.usecases {
min-width: 260px;
}
.usecases li,
.pricing li {
font-size: 0.8em;
line-height: 20px;
padding: 10px 0 10px 0;
display: block;
}
.sub-pad {
padding-left: 34px;
line-height: 25px;
}3. The JavaScript (Vanilla) to activate the menu.
const submenutrigger = document.querySelectorAll(".nav-bar > li");
const dropBackground = document.querySelector(".dropdownBackground");
const nav = document.querySelector(".topnavBar");
/*activate submenu*/
function activeSub() {
this.classList.add("trigger-enter");
setTimeout(
() =>
this.classList.contains("trigger-enter") &&
this.classList.add("trigger-enter-active"),
100
);
dropBackground.classList.add("open");
/*get position on mouseover*/
const dropdown = this.querySelector(".dropdown");
// console.log(dropdown);
const dropdownPos = dropdown.getBoundingClientRect();
// console.log(dropdownPos);
const navPos = nav.getBoundingClientRect();
// console.log(navPos);
const pos = {
height: dropdownPos.height,
width: dropdownPos.width,
top: dropdownPos.top - navPos.top,
left: dropdownPos.left - navPos.left,
};
/*set position of the arrow and submenu on mouseover*/
dropBackground.style.setProperty("width", `${pos.width}px`);
dropBackground.style.setProperty("height", `${pos.height}px`);
dropBackground.style.setProperty(
"transform",
`translate(${pos.left}px, ${pos.top}px)`
);
}
/*deactivate submenu*/
function deactiveSub() {
this.classList.remove("trigger-enter", "trigger-enter-active");
dropBackground.classList.remove("open");
}
/*mouse events*/
submenutrigger.forEach((trigger) =>
trigger.addEventListener("mouseenter", activeSub)
);
submenutrigger.forEach((trigger) =>
trigger.addEventListener("mouseleave", deactiveSub)
);See Also:
Responsive Dropdown Mega Menu In JavaScript
Stripe Like Desktop Navigation In Pure CSS
Stripe.com Inspired Dropdown Mega Menu With JavaScript
CSS Only Dropdown Mega Menu
Creating A Simple Mega Menu with Pure HTML / CSS
WCAG Compliant Responsive Dropdown Navigation – accessible-menu
Accessible Dropdown Nav With Vanilla JavaScript – Clicky Menus
Customizable Context Menus and Dropdowns With Vanilla JS – Tiny Popup Menu