DEV Community

Robson Muniz
Robson Muniz

Posted on

43 9

🎥Simple Dropdown Menu Bar | HTML & CSS🙌

Let’s create from from scratch, a Simple Dropdown Menu Bar using just HTML & CSS, step-by-step from scratch!



Source Code:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Dropdown Menu</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <nav class="nav">
    <ul class="nav__list">
      <li class="nav__listlogo"><img src="/img/logo.png" alt=""></li>
      <li class="nav__listitem"><a href="#">About
          <ul class="nav__listitemdrop">
            <li><a href="#">Our Team</a></li>
            <li><a href="#">Our Process</a></li>
            <li><a href="#">History</a></li>
          </ul>
        </a></li>
      <li class="nav__listitem"><a href="#">Work
          <ul class="nav__listitemdrop">
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Showcase</a></li>
          </ul>
        </a></li>
      <li class="nav__listitem"><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&family=Roboto:wght@300;400;500;700&display=swap');

/*   color variables */
$clr-primary: #3700b3;
$clr-primary-dark: #283593;
$clr-hover: #bb8cfc;
$clr-hover-darker: #6200b3;
$clr-gray300: #c5cae9;

/*   border radius */
$radius: 0.2rem;

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    background: url(img/bg.jpg);
    background-size: cover;
    background-position: center;
    font-family: "Montserrat", sans-serif;
}

.nav {
    background-color: $clr-primary;
    position: fixed;
    width: 100vw;
    box-sizing: 0 0 10px $clr-gray300;

    &__list {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 2rem;
        margin: 0 2rem;

        &logo {
            list-style: none;
            margin-right: auto;
            cursor: pointer;

            img {
                width: 80px;
                height: auto;
                padding: 3px;
            }
        }
        &item {
            list-style: none;
            font-weight: bold;
            position: relative;
            padding: 1.5rem 1rem;
            cursor: pointer;

            &::after {
                content: "";
                width: 0;
                height: .3rem;
                border-radius: $radius;
                position: absolute;
                left: 1rem;
                bottom: .8rem;
                background-color: $clr-hover;
                transition: width 200ms ease-in-out;
            }

            &:hover::after,
            &:focus::after {
                width: 70%;
            }

            &:hover ul,
            &:focus ul {
                opacity: 1;
                visibility: visible;
            }

            &drop {
                position: absolute;
                top: 4rem;
                left: -1rem;
                box-shadow: 0 0 5px $clr-gray300;
                background-color: $clr-primary-dark;
                border-radius: $radius;
                width: 12rem;
                padding: .75rem;
                display: flex;
                flex-direction: column;
                gap: .5rem;
                opacity: 0;
                visibility: hidden;
                transition: opacity 200ms ease-in-out;

                li {
                    list-style: none;
                    padding: .5rem 1rem;
                    border-radius: $radius;
                    transition: background-color 200ms ease-in-out;

                    &:hover,
                    &:focus {
                        background-color: $clr-hover;
                    }
                }
            }
        }
    }

    a {
        color: #fff;
        text-decoration: none;
    }
}

Enter fullscreen mode Exit fullscreen mode

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (2)

Collapse
 
samsoumah profile image
Alkaly.SAM.SOUMAH •

merci

Collapse
 
robsonmuniz16 profile image
Robson Muniz •

De rien.
Je suis heureux que vous ayez aimé.

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

đź‘‹ Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay