How do I create a responsive dropdown menu using HTML and CSS?
We are going to be exploring how to code a responsive dropdown menu using HTML and CSS only. This will be an informative post that is helpful for anyone who wants to learn about coding them!
A dropdown menu is usually used on websites as a way of making navigation easier. It can also be used for things like displaying prices, or contact information. They’re perfect for any situation where you want something more than just text links because they allow the user to quickly find what they need without scrolling around.
I’m excited about this tutorial because it’s really easy and will help you learn some basics about HTML and CSS! Let’s get started…
Steps to create drop down menu in HTML on mouseover
In this blog post, I will show you how to create a responsive dropdown menu using HTML and CSS. The following steps are required to make a responsive dropdown with a submenu:
- Create the basic HTML structure for the navigation bar.
- Add required classes in HTML code that will be used for styling in CSS which is needed later on in the process.
- Write HTML to create a responsive dropdown menu items
- Use CSS to style your navigation bar with a responsive dropdown.
- Create the submenu items inside the dropdown menu
- Add CSS media queries to make things mobile responsive with your new dropdown submenu.
The following resources were used in writing this article – Code Academy, W3Schools, Codecademy, and Treehouse Blog.
Create the responsive navigation menu bar using HTML CSS only
In the previous tutorial, I have already created the responsive navigation menu bar is made with simple HTML and CSS. It has the latest features to make it more functional, including an intuitive design that will suit your needs perfectly!
You can get the source code from the below link, to create a responsive navigation menu bar for your website.
Recommended Post: How to Create Responsive Menu Bar Using HTML And CSS Only
Video Tutorial: How to Make Responsive Dropdown Menu Using HTML and CSS
Now, I am going to share with you a complete video tutorial to create a responsive drop-down menu with a submenu in HTML and CSS. It is a hover-over drop-down menu bar in HTML and CSS.
Source Codes (Responsive Dropdown Menu Using HTML and CSS)
It’s time to get source codes to create a drop-down menu bar in HTML and CSS only.
Responsive Navigation Bar with Drop Down (HTML Code)
Now, below is The HTML code to create a responsive navigation menu bar with drop-down menus. This responsive navbar contains a logo, menu links, and a login button. The navigation bar also includes multi-level dropdown menus.
<!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">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
</head>
<body>
<div class="navbar">
<!-- Navbar logo -->
<div class="nav-header">
<div class="nav-logo">
<a href="#">
<img src="logo.png" width="100px" alt="logo">
</a>
</div>
</div>
<!-- responsive navbar toggle button -->
<input type="checkbox" id="nav-check">
<div class="nav-btn">
<label for="nav-check">
<span></span>
<span></span>
<span></span>
</label>
</div>
<!-- Navbar items -->
<div class="nav-links">
<a href="#">Home</a>
<a href="#">About</a>
<!-- Dropdown menu -->
<div class="dropdown">
<a class="dropBtn" href="#">Services
<i class="fas fa-angle-down"></i>
</a>
<div class="drop-content">
<a href="#">Web Design</a>
<a href="#">Marketing</a>
<a href="#">WordPress</a>
<!-- Creating sub menu Dropdown -->
<div class="dropdown2">
<a class="dropBtn2" href="#">More
<i class="fas fa-angle-right"></i>
</a>
<div class="drop-content2">
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JavaScript</a>
<a href="#">jQuery</a>
</div>
</div>
</div>
</div>
<a href="#">Blogs</a>
<a href="#">Contact</a>
<button class="loginBtn">Login</button>
</div>
</div>
</body>
</html>
Responsive drop down menu with submenu (CSS Code)
Create a Responsive navigation menu bar using CSS only. We can use standard HTML and CSS, or we could make our site more mobile-friendly by adding media queries to cater to smaller screens (like smartphones).
A dropdown element provides an easy way of navigating between various pages on your website without having page reloads – just click the highlighted option you want! Below is the CSS code of a responsive navigation bar with dropdown menus.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background-image: url(background-img.jpg);
background-size: cover;
background-attachment: fixed;
}
.navbar{
height: 70px;
width: 100%;
padding: 19px 30px;
background-color: #1b4cd3;
position: relative;
}
.navbar .nav-header{
display: inline;
}
.navbar .nav-header .nav-logo{
display: inline-block;
margin-top: -7px;
}
.navbar .nav-links{
display: inline;
float: right;
font-size: 18px;
}
.navbar .nav-links .loginBtn{
display: inline-block;
padding: 5px 15px;
margin-left: 20px;
font-size: 17px;
color: rgb(9, 14, 90);
}
.navbar .nav-links a {
padding: 10px 12px;
text-decoration: none;
font-weight: 550;
color: white;
}
/* Hover effects */
.navbar .nav-links a:hover{
background-color: rgba(0, 0, 0, 0.3);
}
/* responsive navbar toggle button */
.navbar #nav-check, .navbar .nav-btn{
display: none;
}
@media (max-width:700px) {
.navbar .nav-btn{
display: inline-block;
position: absolute;
top: 0px;
right: 0px;
}
.navbar .nav-btn label {
display: inline-block;
width: 80px;
height: 70px;
padding: 25px;
}
.navbar .nav-btn label span {
display: block;
height: 10px;
width: 25px;
border-top: 3px solid #eee;
}
.navbar .nav-btn label:hover, .navbar #nav-check:checked ~ .nav-btn label {
background-color: rgb(9, 14, 90);
transition: all 0.5s ease;
}
.navbar .nav-links{
position: absolute;
display: block;
text-align: center;
width: 50%;
background-color: rgb(9, 14, 90);
transition: all 0.3s ease-in;
overflow-y: hidden;
top: 70px;
right: 0px;
}
.navbar .nav-links a {
display: block;
}
/* when nav toggle button not checked */
.navbar #nav-check:not(:checked) ~ .nav-links {
height: 0px;
}
/* when nav toggle button is checked */
.navbar #nav-check:checked ~ .nav-links {
height: calc(100vh - 70px);
overflow-y: auto;
}
.navbar .nav-links .loginBtn {
padding: 10px 40px ;
margin: 20px;
font-size: 18px;
font-weight: bold;
color: rgb(9, 14, 90);
}
/* Responsive dropdown code */
.navbar .nav-links .dropdown, .navbar .nav-links .dropdown2 {
float: none;
width: 100%;
}
.navbar .nav-links .drop-content, .navbar .nav-links .drop-content2 {
position: relative;
background-color: rgb(220, 220, 250);
top: 0px;
left: 0px;
}
/* Text color */
.navbar .nav-links .drop-content a {
color: rgb(9, 14, 90);
}
}
/* Dropdown menu CSS code */
.dropdown{
position: relative;
display: inline-block;
}
.drop-content, .drop-content2 {
display: none;
position: absolute;
background-color: #1b4cd3;
min-width: 120px;
font-size: 16px;
top: 34px;
z-index: 1;
box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.4);
}
/* on hover show dropdown */
.dropdown:hover .drop-content, .dropdown2:hover .drop-content2 {
display: block;
}
/* drondown links */
.drop-content a {
padding: 12px 10px;
border-bottom: 1px solid rgb(197, 197, 250);
display: block;
transition: all 0.5s ease !important;
}
.dropBtn .drop-content a:hover {
background-color: rgb(230, 230, 230);
}
.dropdown:hover .dropBtn, .dropdown2:hover .dropBtn2 {
background-color: rgba(0, 0, 0, 0.3);
}
.dropdown2 .drop-content2 {
position: absolute;
left: 120px;
top: 126px;
}
.dropBtn2 i {
margin-left: 15px;
}
Final Output
Finally, after the execution of the above HTML and CSS codes in your code editor, you will get the following output. The navigation dropdown menu bar is mobile responsive and can auto resizable in all media devices.
After that, if you decrease the screen size the navigation menu bar is also mobile responsive. The below image shows the mobile responsive output.
Final Words
Thank you for following this blog post and taking the time to learn how to create a navigation bar. Next, we will review some CSS tips that can help make your website look even more polished.
The first tip is to add media queries so that the font size on your website scales down when viewed on mobile devices. As always, I hope you have enjoyed reading my informative blog! If you want to learn more please subscribe to my YouTube channel where I share helpful tutorials like this one all of the time!
