In this tutorial we will show you the solution of responsive drop down menu with submenu, in HTML many times you see that in webpage there is a drop down menu.
When you click on the options that are on drop down menu and you may hover also, so a sub menu or say a list appears as a drop down menu.
And inside this drop menu there is also a list which opens on hover of elements of preopen dialog list menu.
So, it looks too interesting. But seems to be hard or complex to do this.
But, in real it is not as hard as it shows. Hence, today here we will show you how to make a responsive drop down menu with submenus.
Step By Step Guide On Responsive Drop Down Menu With Submenu :-
As, there are many ways with the help of which you are able to make a menu or navigation bar.
But we will show you a very easy method which is too easy to make this responsive menu. We here show you from basics like how you can done with help of html only.
Here, we will show you a menu which is made with the help of unordered list. And there is also a menu under its submenu.
<!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>Document</title>
<style>
.ul{
list-style-type: none;
height: 100px;
width: 1000px;
margin: 50px;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
.ul li{
float: left;
}
.ul li a{
background-color: black;
color: white;
text-decoration: none;
padding: 10px;
border: 1px solid white;
display: block;
}
.ul li a:hover{
background-color: lightgrey;
color: black;
}
.ul li ul{
list-style-type: none;
margin: 0;
padding: 0;
display: none;
}
.ul li ul li{
float: none;
}
.ul li:hover >ul{
display: block;
}
.ul li ul li ul{
position: absolute;
top: 95px;
left: 200px;
}
</style>
</head>
<body>
<ul class="ul">
<li>
<a href="">
Menu 1
</a>
<ul>
<li>
<a href="">
Menu 1.1
</a>
<ul>
<li>
<a href="">
Menu 1.11
</a>
</li>
<li>
<a href="">
Menu 1.12
</a>
</li>
<li>
<a href="">
Menu 1.13
</a>
</li>
<li>
<a href="">
Menu 1.14
</a>
</li>
<li>
<a href="">
Menu 1.15
</a>
</li>
</ul>
</li>
<li>
<a href="">
Menu 1.2
</a>
</li>
<li>
<a href="">
Menu 1.3
</a>
</li>
<li>
<a href="">
Menu 1.4
</a>
</li>
<li>
<a href="">
Menu 1.5
</a>
</li>
<li>
<a href="">
Menu 1.6
</a>
</li>
<li>
<a href="">
Menu 1.7
</a>
</li>
</ul>
</li>
<li>
<a href="">
Menu 2
</a>
<ul>
<li>
<a href="">
Menu 2.1
</a>
</li>
<li>
<a href="">
Menu 2.1
</a>
</li>
<li>
<a href="">
Menu 2.3
</a>
</li>
<li>
<a href="">
Menu 2.4
</a>
</li>
<li>
<a href="">
Menu 2.5
</a>
</li>
<li>
</ul>
</li>
<li>
<a href="">
Menu 3
</a>
</li>
<li>
<a href="">
Menu 4
</a>
</li>
<li>
<a href="">
Menu 5
</a>
</li>
</ul>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags.
- So, both have </head> and </title> ending tags respectively. Before, closing the head tag, we use style tag as internal CSS and the code used inside this is CSS code.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
- Here, we create an unordered list, after this we create list tags under li. Here, for creating submenu under menu we create ul under li tags, as given in code. Whereas this menu works with the help of mouse hover only.
- You can also make an ul where you want to display a submenu.
- Rest work is done with the help of CSS, where we use position tag and top with left to arrange its dimensions.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
At last, there are many method, and we choose the base method which is suitable for every other method. Please, don’t take this method easy, this is base method.
In next sessions, we will show that how to make menu bar using other methods and complex ways. I hope this tutorial on responsive drop down menu with submenu helps you.
