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.

Demo ▼


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(http://2.bp.blogspot.com/-W64HRGKssSo/T7zWbXCBBQI/AAAAAAAABzM/J3Ou605AS_U/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(http://1.bp.blogspot.com/-Z9bi1D4dtH8/T7zWalpDEWI/AAAAAAAABzI/iXhXlizOKO8/s1600/helperblogger.com-current-bg.gif) top left repeat-x;
    color: #ffffff;
}

/*End Css Menu from http://www.helperblogger.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://www.helperblogger.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...

More Drop Down Menus

Post a Comment

  1. Thanks so much for this article. It is a useful for blogger.
    I would like to know more, please send me if there is new.
    Thanks.

    ReplyDelete
    Replies
    1. For css / Juery menus, please visit the website: www.freemenu.info This is a free website and provide the css /html/jueqry source code. Apart from that frequently, menu designs are up-dated time to time.

      http://www.freemenu.info/2013/05/js-menu.html

      Delete
  2. i have a problem with this drop down menu. please visite my blog then identify the problem . if you help me i will be so much gratefull of you.

    ReplyDelete
    Replies
    1. here is my blog link shahin699.blogspot.com

      Delete
    2. Hey I can't visit to your blog as it is open for invited users only.Then how can I fix it???

      Delete
  3. Rahul how do i add this when i click the gadget option it opens a menu..so where do i need to post the code.?

    ReplyDelete
    Replies
    1. paste it in the content box and leave the title blank, but make sure that the "Add a Gadget" link you click is the one under your header.

      Delete
  4. Hi Rahul,

    I've applied this great drop down menu in my blog, http://pimanpower.blogspot.in. Background of first tab is in red color which is not looking good. Please suggest me how to make it as same as other tab's background color. Please reply asap.

    ReplyDelete
  5. hey.. does somebody know how to remove that red background color in the first tab? please help.. :(

    ReplyDelete
    Replies
    1. You have to edit below code,

      .menu ul {
      background: url(http://2.bp.blogspot.com/-W64HRGKssSo/T7zWbXCBBQI/AAAAAAAABzM/J3Ou605AS_U/s1600/helperblogger.com-menu-bg.gif) top left repeat-x;

      replace url .....; with any HEX Color code also you can put their your own image URL.

      You can get some HEX Color Codes from here

      Delete
  6. Hi Rahul,

    Thanks for your response. I tried your way but this red color is still there. What to do?

    ReplyDelete
    Replies
    1. Ok then delete below code,

      .menu #current {
      background: url(http://1.bp.blogspot.com/-Z9bi1D4dtH8/T7zWalpDEWI/AAAAAAAABzI/iXhXlizOKO8/s1600/helperblogger.com-current-bg.gif) top left repeat-x;
      color: #ffffff;
      }

      Delete
  7. Good article for drop down menu. You may check similar articles at:

    http://www.freemenu.info/2013/05/js-menu.html
    http://www.freemenu.info/2013/05/js10.html

    ReplyDelete
  8. Nice Job!.....Thanks a Lot....Keep It up....
    Check my Dynamic Animated Dropdown-----www.powertricks4u.blogspot.in

    ReplyDelete
  9. This comment has been removed by a blog administrator.

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top