How Can I Create Animated Drop Down List Using CSS

Posted By Bajarangi soft , Posted On 27-11-2020
Using CSS we can create animated dropdown so when mouse hover on dropdown it will display animated dropdown items.So today we create eight different animated dropdown list display using css and html

How Can I Create Animated Drop Down Using CSS
Complete Code For Creating Animated Drop Down List Using CSS.
<!DOCTYPE html>
<html>
<head>
    <title>How Can I Create Animated Drop Down List Using CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="Menusheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>

<style>
    html, body {
        padding: 0;
        margin: 0;
        background-color: #005580;
        font-family: sans-serif;
    }

    ul {
        list-style: none;
    }

    .dropdown {
        /*background-color: #fff;*/
        background: url("https://cdn.hipwallpaper.com/i/99/12/SYepgx.jpg");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        height: 450px;
        margin: 50px auto;
        position: relative;
    }

    .menu-list {
        display: inline-block;
        padding: 50px;
        text-align: center;
        margin: 0px 10px;
        position: absolute;
    }
    .menu-list li:hover {
        background: #ff944d;
    }
    .menu-list > ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: inline-block;
        background:#ff6600;
        border-radius: 5px;
        color: black;
        font-weight: bold;
    }
    .menu-list > ul > li {
        float: left;
        width: 150px;
        height: 50px;
        line-height: 50px;
        position: relative;
        font-size: 14px;
        cursor: pointer;
    }

    ul.drop-menu {
        position: absolute;
        top: 100%;
        left: 0%;
        width: 100%;
        padding: 0;
    }
    ul.drop-menu li {
        background: #ff8533;
    }
    ul.drop-menu li:hover {
        background: #ff751a;
    }
    ul.drop-menu li:first-child {
        border-radius: 2px 2px 0 0;
    }
    ul.drop-menu li:last-child {
        border-radius: 0 0 5px 5px;
    }

    ul.drop-menu li {
        display: none;
    }

    li:hover > ul.drop-menu li {
        display: block;
    }

    li:hover > ul.drop-menu.menu-1 {
        perspective: 1000px;
    }
    li:hover > ul.drop-menu.menu-1 li {
        transform-origin: top left;
        opacity: 0;
    }
    li:hover > ul.drop-menu.menu-1 li:nth-child(1) {
        animation-name: menu-1;
        animation-duration: 1s;
        animation-delay: -150ms;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-1 li:nth-child(2) {
        animation-name: menu-1;
        animation-duration: 1s;
        animation-delay: 0ms;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-1 li:nth-child(3) {
        animation-name: menu-1;
        animation-duration: 1s;
        animation-delay: 150ms;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-1 li:nth-child(4) {
        animation-name: menu-1;
        animation-duration: 1s;
        animation-delay: 300ms;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-1 li:nth-child(5) {
        animation-name: menu-1;
        animation-duration: 1s;
        animation-delay: 450ms;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-1 li:nth-child(6) {
        animation-name: menu-1;
        animation-duration: 1s;
        animation-delay: 600ms;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    @keyframes menu-1 {
        0% {
            opacity: 0;
            transform: rotateZ(90deg);
        }
        70% {
            transform: skewX(10deg);
        }
        100% {
            opacity: 1;
            transform: rotateZ(0deg);
        }
    }
    li:hover > ul.drop-menu.menu-2 {
        perspective: 1000px;
    }
    li:hover > ul.drop-menu.menu-2 li {
        transform-origin: top center;
        opacity: 0;
    }
    li:hover > ul.drop-menu.menu-2 li:nth-child(1) {
        animation-name: menu-2;
        animation-duration: 1s;
        animation-delay: -150ms;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-2 li:nth-child(2) {
        animation-name: menu-2;
        animation-duration: 1s;
        animation-delay: 0ms;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-2 li:nth-child(3) {
        animation-name: menu-2;
        animation-duration: 1s;
        animation-delay: 150ms;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-2 li:nth-child(4) {
        animation-name: menu-2;
        animation-duration: 1s;
        animation-delay: 300ms;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-2 li:nth-child(5) {
        animation-name: menu-2;
        animation-duration: 1s;
        animation-delay: 450ms;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-2 li:nth-child(6) {
        animation-name: menu-2;
        animation-duration: 1s;
        animation-delay: 600ms;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    @keyframes menu-2 {
        0% {
            opacity: 0;
            transform: rotateX(-90deg);
        }
        50% {
            transform: rotateX(20deg);
        }
        100% {
            opacity: 1;
            transform: rotateX(0deg);
        }
    }
    li:hover > ul.drop-menu.menu-3 {
        perspective: 1000px;
    }
    li:hover > ul.drop-menu.menu-3 li {
        transform-origin: top center;
        opacity: 0;
    }
    li:hover > ul.drop-menu.menu-3 li:nth-child(1) {
        animation-name: menu-3;
        animation-duration: 1s;
        animation-delay: -150ms;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-3 li:nth-child(2) {
        animation-name: menu-3;
        animation-duration: 1s;
        animation-delay: 0ms;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-3 li:nth-child(3) {
        animation-name: menu-3;
        animation-duration: 1s;
        animation-delay: 150ms;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-3 li:nth-child(4) {
        animation-name: menu-3;
        animation-duration: 1s;
        animation-delay: 300ms;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-3 li:nth-child(5) {
        animation-name: menu-3;
        animation-duration: 1s;
        animation-delay: 450ms;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-3 li:nth-child(6) {
        animation-name: menu-3;
        animation-duration: 1s;
        animation-delay: 600ms;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    @keyframes menu-3 {
        0% {
            opacity: 0;
            transform: rotateY(90deg);
        }
        70% {
            transform: rotateY(-10deg);
        }
        100% {
            opacity: 1;
            transform: rotateY(0deg);
        }
    }
    li:hover > ul.drop-menu.menu-4 {
        perspective: 1000px;
    }
    li:hover > ul.drop-menu.menu-4 li {
        transform-origin: top center;
        opacity: 0;
    }
    li:hover > ul.drop-menu.menu-4 li:nth-child(1) {
        animation-name: menu-4;
        animation-delay: -150ms;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-4 li:nth-child(2) {
        animation-name: menu-4;
        animation-delay: 0ms;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-4 li:nth-child(3) {
        animation-name: menu-4;
        animation-delay: 150ms;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-4 li:nth-child(4) {
        animation-name: menu-4;
        animation-delay: 300ms;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-4 li:nth-child(5) {
        animation-name: menu-4;
        animation-delay: 450ms;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-4 li:nth-child(6) {
        animation-name: menu-4;
        animation-delay: 600ms;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    @keyframes menu-4 {
        0% {
            opacity: 0;
            transform: translateX(-100px);
        }
        70% {
            transform: translateX(20px);
        }
        100% {
            opacity: 1;
            transform: translateX(0px);
        }
    }
    li:hover > ul.drop-menu.menu-5 {
        perspective: 1000px;
    }
    li:hover > ul.drop-menu.menu-5 li {
        transform-origin: top center;
        opacity: 0;
    }
    li:hover > ul.drop-menu.menu-5 li:nth-child(1) {
        animation-name: menu-5;
        animation-duration: 150ms;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-5 li:nth-child(2) {
        animation-name: menu-5;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-5 li:nth-child(3) {
        animation-name: menu-5;
        animation-duration: 450ms;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-5 li:nth-child(4) {
        animation-name: menu-5;
        animation-duration: 600ms;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-5 li:nth-child(5) {
        animation-name: menu-5;
        animation-duration: 750ms;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-5 li:nth-child(6) {
        animation-name: menu-5;
        animation-duration: 900ms;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    @keyframes menu-5 {
        0% {
            opacity: 0;
            transform: scale(0);
        }
        50% {
            opacity: 1;
        }
        90% {
            transform: scale(1.1);
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }
    li:hover > ul.drop-menu.menu-6 {
        perspective: 1000px;
    }
    li:hover > ul.drop-menu.menu-6 li {
        transform-origin: top right;
        opacity: 0;
    }
    li:hover > ul.drop-menu.menu-6 li:nth-child(1) {
        animation-name: menu-6;
        animation-delay: -150ms;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-6 li:nth-child(2) {
        animation-name: menu-6;
        animation-delay: 0ms;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-6 li:nth-child(3) {
        animation-name: menu-6;
        animation-delay: 150ms;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-6 li:nth-child(4) {
        animation-name: menu-6;
        animation-delay: 300ms;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-6 li:nth-child(5) {
        animation-name: menu-6;
        animation-delay: 450ms;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-6 li:nth-child(6) {
        animation-name: menu-6;
        animation-delay: 600ms;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    @keyframes menu-6 {
        0% {
            opacity: 0;
            margin-top: 50px;
            transform: rotate(-45deg);
        }
        90% {
            margin-top: -10px;
            transform: rotate(0deg);
        }
        100% {
            opacity: 1;
            margin-top: 0px;
        }
    }
    li:hover > ul.drop-menu.menu-7 {
        perspective: 1000px;
    }
    li:hover > ul.drop-menu.menu-7 li {
        transform-origin: top left;
        opacity: 0;
    }
    li:hover > ul.drop-menu.menu-7 li:nth-child(1) {
        animation-name: menu-7;
        animation-delay: -150ms;
        animation-duration: 600ms;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-7 li:nth-child(2) {
        animation-name: menu-7;
        animation-delay: 0ms;
        animation-duration: 600ms;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-7 li:nth-child(3) {
        animation-name: menu-7;
        animation-delay: 150ms;
        animation-duration: 600ms;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-7 li:nth-child(4) {
        animation-name: menu-7;
        animation-delay: 300ms;
        animation-duration: 600ms;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-7 li:nth-child(5) {
        animation-name: menu-7;
        animation-delay: 450ms;
        animation-duration: 600ms;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-7 li:nth-child(6) {
        animation-name: menu-7;
        animation-delay: 600ms;
        animation-duration: 600ms;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    @keyframes menu-7 {
        0% {
            opacity: 0;
            transform: rotateY(90deg);
            margin-top: -100px;
        }
        80% {
            margin-top: 0px;
            transform: rotateY(90deg);
        }
        90% {
            transform: rotateY(-10deg);
            margin-top: 5px;
        }
        100% {
            opacity: 1;
            margin-top: 0px;
            transform: rotateY(0deg);
        }
    }
    li:hover > ul.drop-menu.menu-8 {
        perspective: 1000px;
    }
    li:hover > ul.drop-menu.menu-8 li {
        transform-origin: top left;
        opacity: 0;
    }
    li:hover > ul.drop-menu.menu-8 li:nth-child(1) {
        animation-name: menu-8;
        animation-delay: 75ms;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-8 li:nth-child(2) {
        animation-name: menu-8;
        animation-delay: 150ms;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-8 li:nth-child(3) {
        animation-name: menu-8;
        animation-delay: 225ms;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-8 li:nth-child(4) {
        animation-name: menu-8;
        animation-delay: 300ms;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-8 li:nth-child(5) {
        animation-name: menu-8;
        animation-delay: 375ms;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    li:hover > ul.drop-menu.menu-8 li:nth-child(6) {
        animation-name: menu-8;
        animation-delay: 450ms;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    @keyframes menu-8 {
        0% {
            opacity: 0;
            transform: skewX(45deg) skewY(-45deg);
        }
        80% {
            transform: skewX(-10) skewY(-10);
        }
        100% {
            opacity: 1;
            transform: skewX(0deg) skewY(0deg);
        }
    }
</style>
<body>
<div class="container">
    <br>
    <div class="text-center">
        <h1 id="color" style="color: white;text-align: center">Create Animated Drop Down List Using CSS</h1>
    </div>
    <div class="dropdown">

        <div class="well">
            <div class="menu-list">
                <ul>
                    <li>Menu 1
                        <ul class="drop-menu menu-1">
                            <li>ONE</li>
                            <li>TWO</li>
                            <li>THREE</li>
                            <li>FOUR</li>
                            <li>FIVE</li>
                        </ul>
                    </li>
                    <li>Menu 2
                        <ul class="drop-menu menu-2">
                            <li>ONE</li>
                            <li>TWO</li>
                            <li>THREE</li>
                            <li>FOUR</li>
                            <li>FIVE</li>
                        </ul>
                    </li>
                    <li>Menu 3
                        <ul class="drop-menu menu-3">
                            <li>ONE</li>
                            <li>TWO</li>
                            <li>THREE</li>
                            <li>FOUR</li>
                            <li>FIVE</li>
                        </ul>
                    </li>
                    <li>Menu 4
                        <ul class="drop-menu menu-4">
                            <li>ONE</li>
                            <li>TWO</li>
                            <li>THREE</li>
                            <li>FOUR</li>
                            <li>FIVE</li>
                        </ul>
                    </li>
                    <li>Menu 5
                        <ul class="drop-menu menu-5">
                            <li>ONE</li>
                            <li>TWO</li>
                            <li>THREE</li>
                            <li>FOUR</li>
                            <li>FIVE</li>
                        </ul>
                    </li>
                    <li>Menu 6
                        <ul class="drop-menu menu-6">
                            <li>ONE</li>
                            <li>TWO</li>
                            <li>THREE</li>
                            <li>FOUR</li>
                            <li>FIVE</li>
                        </ul>
                    </li>
                    <li>Menu 7
                        <ul class="drop-menu menu-7">
                            <li>ONE</li>
                            <li>TWO</li>
                            <li>THREE</li>
                            <li>FOUR</li>
                            <li>FIVE</li>
                        </ul>
                    </li>
                    <li>Menu 8
                        <ul class="drop-menu menu-8">
                            <li>ONE</li>
                            <li>TWO</li>
                            <li>THREE</li>
                            <li>FOUR</li>
                            <li>FIVE</li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
</html>
Related Post
How To Add a Drop Down Arrow In Html Using Bootstrap
How To Create Animated Loader Ring Using Html and Css
How To Create Animated Search Input Using Html And CSS
How To Create Animated Buttons Using Cascading Style Sheets
How To Create Animated Checkbox Using CSS And HTML
How To Create Animated Labels For Input Field Using CSS
How Can I Create Animated Image On Scroll Using CSS
How Can I Create Animated Drop Down List Using CSS
How Do I Create Responsive Animated Tabs Using CSS
How Can I Create Animated File Uploading Using CSS