Add a CSS3 Drop Down Menu To Blogger

CSS3 Menus is the best way to arrange your blog's important links neatly and suitably.They also helps your readers to navigate through blog easily and rapidly.Adding a beautiful drop down menu to your blog also increases beauty of your blog that why Navigation Menus plays an important role in improving your blog SEO or traffic in little amount.I have shared many drop down menus but this one is little different from them also the biggest advantage of this menu is it is made from pure CSS3 and only two small images are used in this menu so that this menu will not affect on your blog's loading time.Now let's see how to add it to blogger blog ?See the demo of menu first.

How To Add CSS3 Drop Down Menu To Blogger

1. Go to Blogger Dashboard > Layout.
2. Click on Add a Gadget link present at just below of header
3. Paste the code after replacing links with your links
4. Finally save your menu

<style> /*Start Css Menu*/
.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/AVvXsEgYKKFlkKS_SjespyV-xBHnNlUw-KvZ0pCCRInVi1kHe6t2RB39qLxPtp_J71bzAa1QO0xGBLgX8IDY0rCFro9GMw5Wfy7JYkhIk2QKp1-NFfoI5GuOBtaq3UzUv_KAta9-HaXgKds74c4/s1600/helperblogger.com-menu-bg.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/AVvXsEjOx8yxcM69chVuaN8lZ0cb9EP0eFE3_g_1Q0cYi-5xPNj3uSHXHsq7gK4HHN5t0MSlNkBhlxkOYeUCtNeqT6Uzy7YMG1x4AWgfvndAq2Do8lUHiCnRlU5GAokimEPxdnFbZ4nrLCwS-Q0/s1600/helperblogger.com-current-bg.gif) top left repeat-x;
    color: #ffffff;
}

/*End Css Menu from http://readyblogger.blogspot.com/*/ 
</style>  


<div class="menu">
 <ul>
  <li><a href="#" id="current">Home</a></li>
  <li><a href="#">Products</a>
  <ul>
   <li><a href="#">Drop Down CSS Menus</a></li>
   <li><a href="#">Horizontal CSS Menus</a></li>
   <li><a href="#">Vertical CSS Menus</a></li>
   <li><a href="#">Dreamweaver Menus</a></li>
  </ul>
  </li>
  <li><a href="#">FAQ</a>
  <ul>
   <li><a href="#">Drop Down CSS Menus</a></li>
   <li><a href="#">Horizontal CSS Menus</a></li>
   <li><a href="#">Vertical CSS Menus</a></li>
   <li><a href="#">Dreamweaver Menus</a></li>
  </ul>
  </li>
  <li><a href="#">Contact</a></li>
  <li><a href="http://readyblogger.blogspot.com/">Create This</a></li>
 </ul>
</div>

Now replace # with your own links and replace the texts with your texts with your own text which you want to appear on menu.

Customizations

Note - I highly recommend you to use our HTML Editor to make your changes.You can see a live preview of your menu with using HTML Editor.Copy all of the above code and paste it into editor.

Further Help?

Many newbies bloggers gets the problem while adding links and texts.If you are getting the same problem then simply provide a tree menu of your menu,I will build the HTML part for you.Also feel free to ask your any little query...

Tweet