In this tutorial we will show you the solution of drop down menu bar in HTML, in html, here are many website that have a drop down menu. It seems to be interesting and creative way to divide the whole website in small parts.
With the help of this, we are able to make a drop down menu bar. We hope that you already see the article in which we create a menu bar only.
If you not seen it don’t worry, we are always here to help you and teach you that how you can make a simple menu bar with drop down effect on it.
Step By Step Guide On Drop Down Menu Bar In HTML :-
As, there are many ways with the help of which this topic can be done. But we will show you the simplest method with the help of which you are able to do this. Now,
<!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>
</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>
</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>
</ul>
</li>
<li>
<a href="">
Menu 3
</a>
<ul>
<li>
<a href="">
Menu 3.1
</a>
</li>
<li>
<a href="">
Menu 3.2
</a>
</li>
<li>
<a href="">
Menu 3.3
</a>
</li>
</ul>
</li>
<li>
<a href="">
Menu 4
</a>
<ul>
<li>
<a href="">
Menu 4.1
</a>
</li>
<li>
<a href="">
Menu 4.2
</a>
</li>
</ul>
</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 a list using ul and li’s, which is main menu, you can see the css that we give to them.
- After that under li tags there are anchor tag, after this we make another list, using ul and li’s. So, that when we hover on any option then a drop down list appears.
- You can customize the list under anchor tag according to your choice. The CSS that used in code can be seen in style that, the drop down effect that we give to menus is using hover.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
At last, there are many ways to create a drop down menu in html. But hover method is the most used method in html.
With the help of which you are able to create a menu bar and understand this you can create a drop down menu.
After this session we will also show that how you are able to make a menu inside drop down menu of menu bar. I hope this tutorial on drop down menu bar in HTML helps you.
About Riya
