All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Drop Down Menu In HTML On Mouseover

Last Updated : Mar 11, 2024

Drop Down Menu In HTML On Mouseover

In this tutorial we will show you the solution of drop down menu in HTML on mouseover, in html, Most of times you see a website in which when you hover on a menu then the menu bar automatically drop downs.

I want to say that there is a list of menus in website in which there are many options in it. And when you move your cursor on any one, the list that under the option automatically opens, which is known as drop down.

It looks to be more attractive and seems to be complex. But we are always here for you. So, today we tell you that how you are able to make a drop down menu in html on mouseover.

Step By Step Guide On Drop Down Menu In HTML On Mouseover :-

As, there are many ways with the help of which this topic can be done. But, there is always a base method, from which others develops.

So, today we find the solution of this method from basic. So, that if you want to change some tags, then the base remains clear. Here, below an example is given in which we use unordered list, some simple list tag with a little CSS.

We hope that you can understand how to do this, with help of codes only. But, don’t worry if you not able to understand, after example there are some points, in which you understand what we done in codes.

 <!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>
 </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>
 <style>
 .ul{
 </html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. The CSS that used in code can be seen in style that, the drop down effect that we give to menu’s is using hover.
  8. 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 on mouseover, but the codes above is simplest and helps you to understand that how drop down menu works without click of mouse.

In further session, we will also teach you that how you are able to create nav-bar only with the help of CSS properties. I hope this tutorial on drop down menu in HTML on mouseover helps you.