How To Practice Driblet Downwards Card Inwards Blogger

How to Create Drop Down Menu In Blogger | welcome to the TutBig Blogger tutorial today I volition exhibit y'all how to practise Drop Down Menu inward Blogger weblog amongst pictures or how to practise drib downward navigation bill of fare amongst sub bill of fare inward Blogger.

Tab Menu tin categories our Blogger weblog posts similar nosotros bring Html too windows play tricks shipping service too thence nosotros practise these categories or tabs like:-

Step 1: First nosotros larn to Blogger Layout too click Add a Gadget Link.

Step 2: Click the HTML/JavaScript link.

Step 3: Paste the Code inward Content surface area too 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 too click the Customise button.

Step 5: Click the Advanced Link too scroll Down links too thence Click Add CSS link. Here nosotros glue the CSS Code too 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 bill of fare */
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff; /* background color of the principal bill of fare */
  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 bill of fare links */
border:0;
}
.tabs-inner .widget ul#menu_bar li:hover {
  background: #555; /* background color when y'all ringlet over a bill of fare championship */
  color: #fff; /* font color when y'all ringlet over a bill of fare championship */
}
.tabs-inner .widget ul#menu_bar li:hover a {
  background: transparent;
  color: #fff; /* font color when y'all ringlet over a bill of fare championship 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 color of the sub bill of fare items */
  display: block;
  color: #fff; /* font color of the sub bill of fare items */
  text-shadow: 0 -1px 0 #000;
}
ul#menu_bar li ul li a{
  color:#fff  /* link color of the sub bill of fare items */
}
.tabs-inner .widget ul#menu_bar li ul li:hover {
  background: #666; /* background color when y'all ringlet over sub bill of fare items */
}
.tabs-inner .widget ul#menu_bar li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

Step 6: Go to Your Blogger Blog.

Note:- Here nosotros Replace # RED Code amongst Blog URL.