Telegram Group Join Now
ADVERTISEMENT
Create Dropdown Menu Using Only HTML and CSS ( Source Code)
Welcome to the Codewithrandom blog. In this blog, we learn how to create a Dropdown Menu Using HTML and CSS. We use Html for creating the Structure of the Dropdown Menu by creating a navbar And Use Css for styling the Dropdown menu.
ADVERTISEMENT
Dropdown Menu Using Only HTML and CSS Project Preview👇
ADVERTISEMENT
ADVERTISEMENT
| Code by | N/A |
| Project Download | Link Available Below |
| Language used | HTML and CSS |
| External link / Dependencies | No |
| Responsive | Yes |
HTML Code For Dropdown Menu
ADVERTISEMENT
<body>
<div id="container">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li>
<a href="#">Web Design</a>
<ul>
<li><a href="#">Project</a></li>
<li><a href="#">Videos</a></li>
<li>
<a href="#">Tutorials</a>
<ul>
<li><a href="#">HTML/CSS</a></li>
<li><a href="#">Javascript</a></li>
<li>
<a href="#">UI Trend</a>
<ul>
<li><a href="#">Neumorphism</a></li>
<li><a href="#">Glassmorphism</a></li>
<li><a href="#">Other UI</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Web development</a></li>
<li><a href="#">CWR</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<h1>
Go to google search codewithrandom and visit my website for source. code
and 40+ frontend project available with complete code
</h1>
</body>
There is all Html Code for the dropdown menu. Now, you can see output without Css, then we write CSS Code for our Dropdown Menu.
ADVERTISEMENT
Output
CSS Code For Dropdown Menu
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Bree+Serif);
body {
background: #ebf0f5;
font-size: 22px;
line-height: 32px;
color: #ffffff;
word-wrap: break-word !important;
font-family: "Open Sans", sans-serif;
}
a {
color: #fff;
}
#container {
margin: 0 auto;
}
nav {
margin: 50px 0;
background-color: #0f131f;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
display: inline-block;
background-color: #0f131f;
}
nav a {
display: block;
padding: 0 10px;
color: #fff;
font-size: 20px;
line-height: 60px;
text-decoration: none;
}
nav a:hover {
background-color: #5f5c5c;
}
nav ul ul {
display: none;
position: absolute;
top: 60px;
}
nav ul li:hover > ul {
display: inherit;
}
nav ul ul li {
width: 170px;
float: none;
display: list-item;
position: relative;
}
nav ul ul ul li {
position: relative;
top: -60px;
left: 170px;
}
h1 {
width: 670px;
color: black;
font-size: 1.4rem;
}
li > a:after {
content: " +";
}
li > a:only-child:after {
content: "";
}
Now we have completed our Dropdown Menu project. Here is our updated output HTML + CSS.
Final Output Of Dropdown Menu Html Css
ADVERTISEMENT
10+ Javascript Projects For Beginners With Source Code
ADVERTISEMENT
Now we have completed our Dropdown Menu. Here is our updated output with Html and Css. Hope you like Dropdown Menu Project. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.
Thank you!
In this post, we learn how to create a Dropdown Menu Using HTML and CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Written by – Code With Random/Anki
Which code editor do you use for Dropdown Menu coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
ADVERTISEMENT
is this project responsive or not?
Yes! this is a responsive project
ADVERTISEMENT
Do you use any external links to create this project?
No!
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT