Free Coding Ebook 👉 Get Now
Create Dropdown Menu Using Pure HTML and CSS
Welcome to the Codewithrandom blog. Today we are Going to create a Dropdown Menu Using Pure Html and Css. We use the Nav tag and Ul, li tag for the Dropdown Menu with help of Css. Hope you enjoy our blog so let’s start with a basic HTML structure for the Pure Dropdown Menu. 50+ HTML, CSS & JavaScript Projects With Source CodePure Css Drop-down Menu
| Code by | Mark |
| Project Download | Link Available Below |
| Language used | HTML and CSS |
| External link / Dependencies | NO |
| Responsive | YES |
Html Code For Dropdown Menu
<!DOCTYPE html>
<html>
<head>
<title>Pure Css Dropdown Menu</title>
<link rel='stylesheet' href='style1.css' />
<link href="https://fonts.googleapis.com/css?family=Arvo&display=swap" rel="stylesheet">
</head>
<body>
<nav role="navigation" class="primary-navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Work ▾</a>
<ul class="dropdown">
<li><a href="#">Web Development</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">Iconography</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>
There is all the html code for the Pure Dropdown Menu. Now, you can see output without CSS, then we write CSS for the Pure Dropdown Menu.
Portfolio Website using HTML and CSS (Source Code)
Output
CSS Code For Dropdown Menu
nav.primary-navigation {
margin: 0 auto;
display: block;
padding: 120px 0 0 0;
text-align: center;
font-size: 16px;
}
nav.primary-navigation ul li {
list-style: none;
margin: 0 auto;
border-left: 2px solid #3ca0e7;
display: inline-block;
padding: 0 30px;
position: relative;
text-decoration: none;
text-align: center;
font-family: arvo;
}
nav.primary-navigation li a {
color: black;
}
nav.primary-navigation li a:hover {
color: #3ca0e7;
}
nav.primary-navigation li:hover {
cursor: pointer;
}
nav.primary-navigation ul li ul {
visibility: hidden;
opacity: 0;
position: absolute;
padding-left: 0;
left: 0;
display: none;
background: white;
}
nav.primary-navigation ul li:hover > ul,
nav.primary-navigation ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
min-width: 250px;
text-align: left;
padding-top: 20px;
box-shadow: 0px 3px 5px -1px #ccc;
}
nav.primary-navigation ul li ul li {
clear: both;
width: 100%;
text-align: left;
margin-bottom: 20px;
border-style: none;
}
nav.primary-navigation ul li ul li a:hover {
padding-left: 10px;
border-left: 2px solid #3ca0e7;
transition: all 0.3s ease;
}
a {
text-decoration: none;
}
a:hover {
color: #3ca0e7;
}
ul li ul li a {
transition: all 0.5s ease;
}
We have completed our CSS Code for Dropdown Menu, Here is our final output!
Final Output Of Dropdown Menu Using Pure CSS
Which code editor do you use for this Indian Flag coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
is this project responsive or not?
Yes! this project is a responsive project.
Do you use any external links to create this project?
No!
