🎥Simple Dropdown Menu Bar | HTML & CSS🙌
Tags: html, css, beginners, webdev
Published: 2021-11-27 13:06:28

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

***


{% youtube QY_k6iacrlw %}

***


###Source Code:

```HTML
<!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>
```

---
```scss
@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;
	}
}

```