Stripe Menu Dropdown (Pure CSS)

Description:-

Hey Codex, today in this blog you’ll learn "How to create a Stripe Menu Dropdown (Pure CSS) | Step by Step.

Let's see!

First, try it by following the video tutorial !

Source code:-

First, try it by following the video tutorial. It will help you to understand all of it. After that, if you have got something wrong with your code use the given source codes to compare with yours. It will help you to understand all of it and your mistakes.

HTML

Create a file with the name of index.html and paste the HTML code in it.

<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>

CSS

Now create a file with the name of style.css and paste the CSS code in it.

* { box-sizing: border-box;}

body {
    background-color: rgba(0, 128, 0, 0.783);
    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; }