Create Drop Down Menu In Blogger

Hello friends, welcome to the Techtspot Blogger tutorial today I will show you how to create Drop Down Menu in Blogger blog with pictures or how to create drop down navigation menu with sub menu in Blogger.

Tab Menu can categories our Blogger blog posts like we have Html and windows trick post then we create these categories or tabs like:-
" Web Design " have two sub menu [html] [CSS] and
" Computer Tricks " have one sub menu [Windows trick]

These are Following Steps:-

Step 1: First we go to Blogger Layout and click Add a Gadget Link.

Step 2: Click the HTML/JavaScript link.

Step 3: Paste the Code in Content area and Click Save button.

<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: Now Click Blogger Theme link and click the Customise button.

Step 5: Click the Advanced Link and scroll Down links then Click Add CSS link. Here we paste the CSS Code and click Apply to Blog button.

.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: Go to the Blogger Blog.

Note:- Here we Replace # RED Code with Blog URL.

Read More:- Add Animated Download Buttons In Blogger
Read More:- Make Money Using Affiliate Marketing

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