How to create Drop Down Menu in Blogger blog with Pictures

Hello friends welcome to the Techtspot blog, today I will show you how to add or create Drop Down Menu in the Blogger blog with pictures.

What is Menu Bar?

The menu tab or Menu bar is a navigation system and is located at the top of the blog and website and mostly menu bar looks in horizontal view but sometimes it is left side in vertical view and using the Menu bar visitors easily visit a particular category and even subcategories.

Why we need to add Drop Down Menu Tabs in the blog?

Why do we need a dropdown menu horizontal and vertical bar because we know most of the time we are managing a blog, website, and eCommerce Store, now we are publishing content in our blog then we need to differentiate the categories then we use a drop-down menu tab and add our labels is the submenu.

Likewise when we are working on our website services pages then we subcategories our services page and we add in the submenu and when we are adding a lot of products in our E-Commerce Store then we are making a dropdown menu bar because we want to subcategorize our products like every eCommerce website are creating drop-down menu bar for example- we create some pages - Xbox gaming, PlayStation gaming, PC gaming, Mobile gaming, and cloud gaming then we categorised into the one main menu Gaming, now let's start.

These are the Following Steps:-

Step 1: First go to the Blogger blog dashboard and click the Layout option then go to the header layout and click the Add a Gadget link because we want to add a drop-down menu bar in the header section.

Step 2: Here we select the HTML/JavaScript option.

Step 3: Now you add your blog menu and submenu in the code and copy the dropdown menu code then paste it in the Content area and at last, click the Save button.

Drop Down Menu Code:-

<ul id="menu_bar">
  <li><a href="#">Home</a></li>
  <li><a href="#">Menu 0</a></li>
  <li>
    Menu 1
    <ul>
      <li><a href="#">Sub-menu 1</a></li>
      <li><a href="#">Sub-menu 2</a></li>
      <li><a href="#">Sub-menu 3</a></li>
    </ul>
  </li>
<li>
    Menu 2
    <ul>
      <li><a href="#">Sub-menu 1</a></li>
      <li><a href="#">Sub-menu 2</a></li>
      <li><a href="#">Sub-menu 3</a></li>
    </ul>
  </li>
 <li><a href="#">Menu 3</a></li>
  <li><a href="#">Menu 4</a></li>
</ul>

Step 4: Again here you click the Theme option and click the Customise dropdown button then select the Edit HTML option.

Step 5: Here you click anywhere in the code and press the Ctrl+F button then find out "]]></b:skin>" code and make some space above the code then paste the dropdown menu bar CSS code and at last you click the Save button.

Drop Down Menu CSS Code:-

.tabs-inner .widget ul#menu_bar {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  border:none;
}
.tabs-inner .widget ul#menu_bar li {
  font-size: 12px/18px;
  font-family: sans-serif; /* Font for the menu */
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff; /* background colour of the main menu */
  float:none;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.tabs-inner .widget ul#menu_bar li a {
padding:0;
font-family: sans-serif; /* Font for the menu links */
border:0;
}
.tabs-inner .widget ul#menu_bar li:hover {
  background: #555; /* background colour when you roll over a menu title */
  color: #fff; /* font colour when you roll over a menu title */
}
.tabs-inner .widget ul#menu_bar li:hover a {
  background: transparent;
  color: #fff; /* font colour when you roll over a menu title link */
}
.tabs-inner .widget ul#menu_bar li ul {
  z-index:1000;
  border:none;
  padding: 0;
  position: absolute;
  top: 45px;
  left: 30px;
  float:none;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
.tabs-inner .widget ul#menu_bar li ul li {
  background: #555; /* background colour of the sub menu items */
  display: block;
  color: #fff; /* font colour of the sub menu items */
  text-shadow: 0 -1px 0 #000;
}
ul#menu_bar li ul li a{
  color:#fff  /* link colour of the sub menu items */
}
.tabs-inner .widget ul#menu_bar li ul li:hover {
  background: #666; /* background colour when you roll over sub menu items */
}
.tabs-inner .widget ul#menu_bar li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

Step 6: Now open the Blogger blog to check the results.

Now Visit the - Demo Blog to see the result.

Above I give you my demo blog link, where I enabling a dropdown horizontal menu bar, if you are thinking to set up a dropdown horizontal menu bar in your blog then first look at the gadget how it looks like in the demo blog.

Read More:- 
Add Animated Download Buttons in Blogger blog
How to Make Money Using Affiliate Marketing
Remove Newer Post And Older Post link from Blogger
How to Change Author Name in Blogger blog

I hope you enjoy this Post. If any problem comment it.