Drop Down Menu Create In Blogger

Drop Down Menu Create In Blogger

Hi, Friends Today I will Show you how to make   

  Drop Down Menu Create In Blogger in Blogger blog with pictures or how to create a drop-down navigation menu with submenu in Blogger.

Menu can Tab categories our Blogger blog posts like we have Html and windows trick post then we create these categories or tabs like:-

" Web Design " has two submenu [html] [CSS] and
" Computer Tricks " have one submenu [Windows trick]

Follow the step to make :

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.

More Post : 

How To Create A Menu bar In blog

How to Get Free .com Domain For Free Add to Blogger

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

 Daily Tech Update Check and Join Us :Facebook | Twitter | Google+ | Tumblr | Instagram | YouTube