html dropdown menu | dropdown menu using HTML css
Welcome🎉 to Code With Random blog. In this blog, we learn that how we how to create an HTML dropdown menu. We use HTML & CSS for this html drop down menu . Hope you enjoy our blog so let's start with a basic HTML structure for the HTML dropdown menu.
HTML code for dropdown menu
<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>
Output
 |
| Output |
CSS 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 CSS section, Here is our updated output CSS.
output
Check it more
Now we have completed our CSS section, Here is our updated output with CSS. Hope you like HTML dropdown menu, you can see 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 Html dropdown menu using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Post a Comment