<header>
    <nav>
        <ul>
            <li><a href="#">Products</a>
                <div class="dropdown">
                    <ul>
                        <li>
                            <a href="">
                                <h3>Payments</h3>
                                <span>Full platform for online                                      payments</span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <h3>Billing</h3>
                                <span>Smart invoicing & subscription management</span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <h3>Connect</h3>
                                <span>Multi-party payments for platforms & marketplaces</span>
                            </a>
                        </li>
                    </ul>
                    <ul class="mini">
                        <li>
                            <a href="">
                                <h3>Sigma</h3>
                                <span>Advanced business analytics & reporting</span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <h3>Atlas</h3>
                                <span>Incorporation for startups</span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <h3>Radar</h3>
                                <span>Fraud prevention with machine learning</span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <h3>Issuing</h3>
                                <span>Toolkit for creating & managing cards</span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <h3>Terminal</h3>
                                <span>Programmable in-person payments</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </nav>
</header>
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");

* { box-sizing: border-box;}

body {
    background-color: #4553FF;
    font-family: "Open Sans", Helvetica, sans-serif;
    margin: 0 auto;
    max-width: 1200px;
    padding: 3rem;
}
a,a:visited {
    color: white;
    font-size: 18px;
    text-decoration: none;
}

/* Custom Stripe Dropdown */
nav { width: 100% }
        
nav ul { text-align: center; }         
nav ul li { 
    display: inline-block; 
    font-weight: 700;
    position: relative;
}

/* Main Dropdown */
nav ul li > div.dropdown {
    left: -9999px;
    opacity: 0;
    padding: 20px 0;
    position: absolute;
    transition: opacity .3s ease-in-out;
    width: 540px;
    visibility: hidden;
}
nav ul li > div.dropdown:before {
    background-color: white;
    border-radius: 2px 0 0 0;
    content:'';
    height: 18px;
    left: calc(50% - 9px);
    position: absolute;
    top: 15px;
    transform: rotate(45deg);
    width: 18px;
}
nav ul li > div.dropdown:after {
    border-radius: 9999px;
    bottom: 20px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    content: '';
    filter: blur(5px);
    height: 40px;
    left: 5%;
    position: absolute;
    width: 90%;
    z-index: -1;
}
nav ul li:hover > div.dropdown,
nav ul li:focus-within > div.dropdown {
    left: 50%;
    opacity: 1;
    transform: translateX(-50%);
    visibility: visible;
}
nav ul li > div.dropdown ul {
    background-color: white;
    border-radius: 10px 10px 0 0;
    padding: 10px 0;
    text-align: left;
}
nav ul li > div.dropdown ul li a,
nav ul li > div.dropdown ul li a:visited {
    color: currentColor;
    display: inline-block;
    padding: 20px 20px 20px 100px;
}
nav ul li > div.dropdown ul li a:hover h3,
nav ul li > div.dropdown ul li a:hover span { opacity: 0.7; }
nav ul li > div.dropdown ul li a{
    position: relative;
}
nav ul li > div.dropdown ul li a:before {
    border-radius: 9999px;
    content: '';
    height: 60px;
    left: 20px;
    position: absolute;
    top: calc(50% - 30px);
    width: 60px;
}
nav ul li > div.dropdown ul li:nth-of-type(1) a:before { background-color: dodgerblue; }
nav ul li > div.dropdown ul li:nth-of-type(2) a:before { background-color: limegreen; }
nav ul li > div.dropdown ul li:nth-of-type(3) a:before { background-color: crimson; }
nav ul li > div.dropdown ul li h3 {
    font-size: 18px;
    margin-bottom: 8px;
    text-transform: uppercase;
}
nav ul li > div.dropdown ul li span {
    color: grey;
    font-size: 15px;
    font-weight: 400;
}

/* Mini, Bottom Dropdown Items */
nav ul li > div.dropdown ul.mini {
    background-color: #F6F9FC;
    border-radius: 0 0 10px 10px;
}
nav ul li > div.dropdown ul.mini li a {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding-left: 70px;
}
nav ul li > div.dropdown ul.mini li a h3 {
    margin-bottom: 0;
    margin-right: 10px;
}
nav ul li > div.dropdown ul.mini li a:before {
    left: 25px;
    height: 30px;
    top: calc(50% - 15px);
    width: 30px;
}
nav ul li > div.dropdown ul.mini li:nth-of-type(1) a:before { background-color: blueviolet; }
nav ul li > div.dropdown ul.mini li:nth-of-type(2) a:before { background-color: gold; }
nav ul li > div.dropdown ul.mini li:nth-of-type(3) a:before { background-color: hotpink; }
nav ul li > div.dropdown ul.mini li:nth-of-type(4) a:before { background-color: lightblue; }
nav ul li > div.dropdown ul.mini li:nth-of-type(5) a:before { background-color: slateblue; }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.