JSFiddle - React, Tailwind, and code Playground

by Anav02

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Creative CSS Dropdown menu</title>
</head>
<body>
<section >
<span>
            <p>Dropdown</p>
            <ul>
                <li>Link 1</li>
                <li>Link 2</li>
                <li>Link 3</li>
            </ul>
        </span>
</section >
</body>
</html>

CSS

* {
    padding: 0;
    margin: 0;
}

:root {
    --purple: #38B6FF;
    --warm: #282A30;
}

body {
  background-color :#282A30;
}

section {
    height: 100vh;
    width: 10ovw;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    text-align: center;
}
p {
    padding: 10px 20px;
}

 span {
    position: relative;
    background-color: var(--purple);
    width: 150px;
    margin: auto;
    font-size: 1rem;
    transform: translateY(-25vh);
    color: #282A30;
    cursor: pointer;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  }


 span ul {
    position: absolute;
    width: 100%;
    transition: all .35s cubic-bezier(0.175, 0.885, 0.32, 2);
    transform: translateX(-50%);
    pointer-events: none;
    opacity: 0;
}

 span:hover ul {
    transform: translateX(0);
    pointer-events:all;
    opacity: 1;
    background-color: var(--warm);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

 span ul li {
   color: var(--purple);
   position: relative;
    list-style: none;
    padding: 10px 0px;
    cursor: pointer;
    transition: all .3s ease;
    background-color: #282A30;

}

span ul li:hover  {
    opacity: 1;
    background-color: var(--purple);
    color: #282A30;
}


 span ul li:hover {
    scale: 1.1;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}