Pure CSS3 multi level Dropdown Menu For Blogger Blog

What a dropdown menu provides is a hierarchical overview of the subsections contained within the menu item that spawned it. Basically, it lists all the subsections within a section of a site when you hover your mouse cursor over it. They are extremely useful in showing what a section of a site contains, and allowing you to access it from anyway else in that site, whether that be the parent page of that subsection, or a page in a different section altogether. Why do you run after scripts such as jquery while you can use simple CSS and HTML to create beautiful drop down menus for your blog.  I am sharing a simple code here that can be fully customize to make your preferred changes. So lets get to work! you View live demo by follow below link. menu stand at the bottom of this blog.

 

View Live Preview

 

Add it to blogger

It is compatible with all major browsers like Firefox, Chrome and Safari. Since IE7+  always lack compatibility with CSS3 therefore only the rounded borders will not render in IE7. I have found solution on the internet how to render rounded border in IE7.  I have kept the installation extremely easy. You just need to copy and paste the code.

 

1. Go To Your Blogger Dashboard>> Layout>>

2. Click on Add a Gadget..

3. Find HTML/JavaScript Gadget.

4. Finally Paste Following code in HTML Area (Leave Title Area Blank)

<style>
#bt-menu ul,
#bt-menu li,
#bt-menu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#bt-menu {
  height: 49px;
  background: #123D60;
  background: -moz-linear-gradient(top, #0077D7 0%, #123D60 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0077D7), color-stop(100%, #123D60));
  background: -webkit-linear-gradient(top, #0077D7 0%, #123D60 100%);
  background: -o-linear-gradient(top, #0077D7 0%, #123D60 100%);
  background: -ms-linear-gradient(top, #0077D7 0%, #123D60 100%);
  background: linear-gradient(to bottom, #0077D7 0%, #123D60 100%);
   -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#0076d7, endColorStr=#123d60);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#0076d7, endColorStr=#123d60);
   /* IE is so silly */
   border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  border-bottom: 4px solid #002A4C;
}

#bt-menu span { 
  margin: 0;
  padding: 0;
  position: relative;
}
#bt-menu:after,
#bt-menu ul:after {
  content: "";
  display: block;
  clear: both;
}
#bt-menu a {
  color: #ffffff;
  display: inline-block;
  font-family: Trebuchet MS, Arial, Verdana;
  font-size: 16px;
  font-weight: bold;
  line-height: 49px;
  padding: 0 25px;
  border-right: 1px solid #123D60;
  text-decoration: none;
}
#bt-menu ul {
  list-style: none;
  }
#bt-menu > ul {
  float: left;
    }
#bt-menu > ul > li {
  float: left;
  
  }
#bt-menu > ul > li:hover:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid transparent;
  margin-left: -10px;
  
}

#bt-menu > ul > li:first-child > a {
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
}
#bt-menu > ul > li:last-child > a {
  border-radius: 0 0px 0 0;
  -moz-border-radius: 0 0px 0 0;
  -webkit-border-radius: 0 0px 0 0;
}
#bt-menu > ul > li.active > a {
background: #004074;
 
}
#bt-menu > ul > li:hover > a {
  background: #004074;
}
#bt-menu .has-sub {
  z-index: 1;
}
#bt-menu .sub:hover > ul {
  display: block;
}
#bt-menu .sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#bt-menu .sub ul li {
  *margin-bottom: -px;

}
#bt-menu .sub ul li a {
  background: #047DCB;
  border-bottom: 1px dotted #6fc7ec;
  filter: none;
  font-size: 14px;
  font-weight: bold;
  display: block;
  line-height: 120%;
  padding: 10px;
  text-shadow:1px 1px 3px #333;
}
#bt-menu .sub ul li:hover a {
  background: #009BFF;
  text-shadow:1px 2px 1px #000;
}
#bt-menu .sub .sub:hover > ul {
  display: block;
}
#bt-menu .sub .sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  }
#bt-menu .sub .sub ul li a {
  background: #0c7fb0;
  border-bottom: 1px dotted #6db2d0;
    
}
#bt-menu .sub .sub ul li a:hover {
  background: #095c80;
}
</style>
<div id='bt-menu'>

<ul>
<li class='active'><a href='http://bl0gger-tricks.blogspot.com'><span>Home</span></a></li>
<li class='sub'><a href='#'><span>Application</span></a>
<ul>
<li class='sub'><a href='URL'><span>HTML Editor</span></a>
<ul>
<li><a href='URL'><span>HTML Encoder</span></a></li>
<li><a href='URL'><span>HTML Encoder</span></a></li>
</ul>
</li>
<li class='sub'><a href='URL'><span>HTML Encoder</span></a></li>
<li class='sub'><a href='URL'><span>Comming Soon</span></a></li>
<li class='sub'><a href='URL'><span>Comming Soon</span></a></li>
</ul>
</li>  
<li class='sub'><a href='#'><span>Tools</span></a>
<ul>
<li class='sub'><a href='URL'><span>HTML Editor</span></a>
<ul>
<li> <a href='URL'><span>Sub Item 1</span></a></li>
<li> <a href='URL'><span>Sub Item 2</span></a></li>
</ul>
</li>
<li class='sub'><a href='URL'><span>HTML Encoder</span></a></li>
<li class='sub'><a href='URL'><span>Page Rank Checker</span></a></li>
<li class='sub'><a href='URL'><span>Color Code</span></a></li>
</ul>
</li>
<li><a href='#'><span>Faqs</span></a></li>
<li><a href='#'><span>Advertise</span></a></li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

The widget is extremely easy to be edited. To change links title simply replaced the text (In Span Tag) with your page titles and replace the hash sign (#) with respective links.

Note:- If in your template b:skin section have already same ids or Classes like “#BT-menu”  “sub” “first-child” last-child”   this drop down menu doesn’t working fine..

If you need extra help in removing rows or columns then please feel free to post your questions. Tell me the specific row and column so that I could share your preferred code in the comments. You can discus it as much with me as possible. This will help others to better understand on how to make further changes.

Stay tuned by subscribing our email feed or follow me on social networks. thanks for reading our post. happy blogging….!!!!!!