How To Practice Drib Downwardly Carte Du Jour Inwards Blogger

How to Create Drop Down Menu In Blogger | welcome to the TutBig Blogger tutorial today I volition demo yous how to usage Drop Down Menu inward Blogger spider web log amongst pictures or how to usage drib downwardly navigation card amongst sub card inward Blogger.

Tab Menu tin laissez passer on notice categories our Blogger spider web log posts similar nosotros bring Html together with windows play tricks ship service together with hence nosotros usage these categories or tabs like:-

Step 1: First nosotros instruct to Blogger Layout together with click Add a Gadget Link.

Step 2: Click the HTML/JavaScript link.

Step 3: Paste the Code inward Content expanse together with 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 together with click the Customise button.

Step 5: Click the Advanced Link together with scroll Down links together with hence Click Add CSS link. Here nosotros glue the CSS Code together with 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 card */
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff; /* background color of the primary card */
  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 card links */
border:0;
}
.tabs-inner .widget ul#menu_bar li:hover {
  background: #555; /* background color when yous gyre over a card championship */
  color: #fff; /* font color when yous gyre over a card championship */
}
.tabs-inner .widget ul#menu_bar li:hover a {
  background: transparent;
  color: #fff; /* font color when yous gyre over a card 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 card items */
  display: block;
  color: #fff; /* font color of the sub card items */
  text-shadow: 0 -1px 0 #000;
}
ul#menu_bar li ul li a{
  color:#fff  /* link color of the sub card items */
}
.tabs-inner .widget ul#menu_bar li ul li:hover {
  background: #666; /* background color when yous gyre over sub card 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.