This content originally appeared on DEV Community and was authored by Robson Muniz
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>
@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;
}
}
This content originally appeared on DEV Community and was authored by Robson Muniz
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
![](https://www.radiofree.org/wp-content/plugins/print-app/icon.jpg)
APA
MLA
Robson Muniz | Sciencx (2021-11-27T13:06:28+00:00) 🎥Simple Dropdown Menu Bar | HTML & CSS🙌. Retrieved from https://www.scien.cx/2021/11/27/%f0%9f%8e%a5simple-dropdown-menu-bar-html-css%f0%9f%99%8c/
" » 🎥Simple Dropdown Menu Bar | HTML & CSS🙌." Robson Muniz | Sciencx - Saturday November 27, 2021, https://www.scien.cx/2021/11/27/%f0%9f%8e%a5simple-dropdown-menu-bar-html-css%f0%9f%99%8c/
HARVARDRobson Muniz | Sciencx Saturday November 27, 2021 » 🎥Simple Dropdown Menu Bar | HTML & CSS🙌., viewed ,<https://www.scien.cx/2021/11/27/%f0%9f%8e%a5simple-dropdown-menu-bar-html-css%f0%9f%99%8c/>
VANCOUVERRobson Muniz | Sciencx - » 🎥Simple Dropdown Menu Bar | HTML & CSS🙌. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/11/27/%f0%9f%8e%a5simple-dropdown-menu-bar-html-css%f0%9f%99%8c/
CHICAGO" » 🎥Simple Dropdown Menu Bar | HTML & CSS🙌." Robson Muniz | Sciencx - Accessed . https://www.scien.cx/2021/11/27/%f0%9f%8e%a5simple-dropdown-menu-bar-html-css%f0%9f%99%8c/
IEEE" » 🎥Simple Dropdown Menu Bar | HTML & CSS🙌." Robson Muniz | Sciencx [Online]. Available: https://www.scien.cx/2021/11/27/%f0%9f%8e%a5simple-dropdown-menu-bar-html-css%f0%9f%99%8c/. [Accessed: ]
rf:citation » 🎥Simple Dropdown Menu Bar | HTML & CSS🙌 | Robson Muniz | Sciencx | https://www.scien.cx/2021/11/27/%f0%9f%8e%a5simple-dropdown-menu-bar-html-css%f0%9f%99%8c/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.