What is drop-down menu and How to create drop-down menu & How to add drop-down menu in to blogger page

What is a Drop-down Menu?

We surf the internet using devices like laptops, iPhones, android phones to easily get information we need. Websites contain the information we need, and dropdown menus use to easily obtain the information we need from those websites. Drop down menu is a simple table-like feature that we use to get the data we need. We can get articles related to the information we need using some of words contained in it. Drop-down menus can help users avoid confusing and can quickly get them access to your site's content. It can help to stop waste time for large websites users. A drop-down menu is a simple easy method of showing a large list of choices since only one choice is displayed initially until the user activates the drop-down box. To create a drop-down menu to a web page, you can use CSS and HTML.

How to create a drop-down menu step by step?

• step 1 : Add HTML:

<div class="dropdown">

<button class="dropbtn">Dropdown</button>

 <div class="dropdown-content">

 <a href="#">Link 1</a>

  <a href="#">Link 2</a>

  <a href="#">Link 3</a>

 </div>

</div>

Example Explained 

Use any element to open the dropdown menu, e.g. a <button>, <a> or <p> element.

Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside it.

Wrap a <div> element around the button and the <div> to position the dropdown menu correctly with CSS.

I use href="#" for test link. In a real website this would be a URLs.



• step 2 : Add CSS:

Example

/* Dropdown Button */

.dropbtn {

  background-color: #04AA6D;

  color: white;

  padding: 16px;

  font-size: 16px;

  border: none;

}




/* The container <div> - needed to position the dropdown content */

.dropdown {

  position: relative;

  display: inline-block;

}




/* Dropdown Content (Hidden by Default) */

.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f1f1f1;

  min-width: 160px;

  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

  z-index: 1;

}




/* Links inside the dropdown */

.dropdown-content a {

  color: black;

  padding: 12px 16px;

  text-decoration: none;

  display: block;

}




/* Change color of dropdown links on hover */

.dropdown-content a:hover {background-color: #ddd;}




/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {display: block;}




/* Change the background color of the dropdown button when the dropdown content is shown */

.dropdown:hover .dropbtn {background-color: #3e8e41;}

Example Explained

We have styled the dropdown button with a background-color, padding, etc.

The .dropdown class uses position:relative, which is needed when we want the dropdown content to be placed right below the dropdown button (using position:absolute).

The .dropdown-content class holds the actual dropdown menu. It is hidden by default, and will be displayed on hover (see below). Note the min-width is set to 160px. Feel free to change this. Tip: If you want the width of the dropdown content to be as wide as the dropdown button, set the width to 100% (and overflow:auto to enable scroll on small screens).

Instead of using a border, we have used the box-shadow property to make the dropdown menu look like a "card". We also use z-index to place the dropdown in front of other elements.

The :hover selector is used to show the dropdown menu when the user moves the mouse over the dropdown button.

Now you will have get some knowledge about how to create drop down menu. Why are you waiting? try to creating your dropdown menu so that users can easily browse your web pages.

How to add drop-down menu in to blogger page

• firstly sign in your blogger
• Select or create which page you want to add drop down menu
• Click on left corner first symbol then again click on "HTML view"



• Now copy paste parts of HTML and CSS needed for create drop down menu




• Finally click on "update" button and Click on "view" for see your drop down menu

Move the mouse over the button to open the drop down menu in above video.

Don't worry about blogger, it give you Chances to  develop using CSS, HTML ,etc your blogger as users friendly.