Add CSS3 Drop Down Menu To Blogger

Ever since The World Wide Web Consortium (W3C) introduce HTML5 and CSS3, the online web tools have took a great new shape, In this tutorial am sharing with you, you are going to learn how you can add a pure CSS drop down menu to your blog with no jQuery effect, and it is of two structures, the html and CSS part. We have created this widget with our possible best, so that the implementation will be so easy for you to understand, and we will be publishing lot's of tutorials about CSS and html structure, so that you will be able to create awesome menus with ease.

How To Add Drop Down Menu

• Go to your blogger dashboard
• Click on "Design" > "Page elements" > "Add a Gadget"
• Copy and paste the code below in the content box leaving the title blank

<style> /*Start Css Menu By RealcomBiz.com*/
.menu {
    border: none;
    border: 0px;
    margin: 0px;
    padding: 0px;
    font-family: verdana,geneva,arial,helvetica,sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: 8e8e8e;
}

.menu ul {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaq9lXfieatYUpdhZRem0W6_BNKzs_2HENonBnddjPF7ivIB6Y0LHBGNEpCOQaGko23r0fz9HnLFFZGQUGHWRb4NuX6L5sbPiOu9uRfZEPV9-HAhyWKymTgSkob5hl0MV1biN9xubFsxjR/s1600/rb+background.gif) top left repeat-x;
    height: 43px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu li {
    float: left;
    padding: 0px 8px 0px 8px;
}

.menu li a {
    color: #666666;
    display: block;
    font-weight: bold;
    line-height: 43px;
    padding: 0px 25px;
    text-align: center;
    text-decoration: none;
}

.menu li a:hover {
    color: #000000;
    text-decoration: none;
}

.menu li ul {
    background: #e0e0e0;
    border-left: 2px solid #a80329;
    border-right: 2px solid #a80329;
    border-bottom: 2px solid #a80329;
    display: none;
    height: auto;
    filter: alpha(opacity=95);
    opacity: 0.95;
    position: absolute;
    width: 225px;
    z-index: 200;
/*top:1em;
/*left:0;*/
}

.menu li:hover ul {
    display: block;
}

.menu li li {
    display: block;
    float: none;
    padding: 0px;
    width: 225px;
}

.menu li ul a {
    display: block;
    font-size: 12px;
    font-style: normal;
    padding: 0px 10px 0px 15px;
    text-align: left;
}

.menu li ul a:hover {
    background: #949494;
    color: #000000;
    opacity: 1.0;
    filter: alpha(opacity=100);
}

.menu p {
    clear: left;
}

.menu #current {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiieyQqJJwc6novuB9rVOVIiccStIidmWziCqDv0iAZVeZ0mCVuqU61WMegUnuhq45YZ-KSW8H0LMldmAFG4a1DlLVfMowRe5sAGMimxmEINe7DqN9GmhMNEObq2i8iBdbXekhtyzcCcF5C/s1600/rb+home+background.gif) top left repeat-x;
    color: #ffffff;
}

/*End Css Menu By RealcomBiz.com*/
</style> 


<div class="menu">
 <ul>
  <li><a href="#" id="current">Home</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Services</a>
  <ul>

   <li><a href="#">Sub page #1</a></li>

   <li><a href="#">Sub page #2</a></li>

   <li><a href="#">Sub page #3</a></li>

   <li><a href="#">Sub page #4</a></li>

  </ul>

  </li>
  <li><a href="#">Templates</a>
  <ul>

   <li><a href="#">Sub page #1</a></li>

   <li><a href="#">Sub page #2</a></li>

   <li><a href="#">Sub page #3</a></li>

   <li><a href="#">Sub page #4</a></li>

  </ul>
  </li>
  <li><a href="http://www.realcombiz.com/">Create This >></a></li>
 </ul>
</div>

Replace # with the url/link of where you want to point the menu to, and replace all sub page with your menu title.
If you look at the code above carefully, you will notice that this is the code that responsible for the drop down effect, and if you which to remove drop down effect from any of the two menu, then omit the code below for it's tag.

  <ul>
   <li><a href="#">Sub page #1</a></li>
   <li><a href="#">Sub page #2</a></li>
   <li><a href="#">Sub page #3</a></li>
   <li><a href="#">Sub page #4</a></li>
  </ul>