RealcomBiz
Pin It

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(http://4.bp.blogspot.com/-qQX1fDv0xbY/UAreB1hPbKI/AAAAAAAAAvc/1CEAIsBF08s/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(http://3.bp.blogspot.com/-ga070y-Fi0A/UAre0d4oPQI/AAAAAAAAAvk/UDOO5lBCLZM/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>

If you encounter any problem, may the structure of the navigation bar look scattered, then read how to add drop down in new blogger template and feel free to ask, if you need any further help, and be expecting more of our stylish drop down menu, take care of yourself till then.



Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

5 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Dear,

    I tried it, got a drop down menu, but removed it because I could not get sorted out how to add my blog posts under the different menu's. Let's say that I wanted the articles menu to drop down in yoga, tango crete and general. I wrote some general posts and I wanted them all to show up when you click on the general tab. How can I do that?

    Thank you

    ReplyDelete
    Replies
    1. You can not add post url to the menu, you can group your posts under label/categories and add the link to the menu by replacing ''#'' with the link of the label/categories you want to add to the menu and replace ''Sub Page #0'' with the title of each label as illustrated above. Read http://realcombiz.com/2012/05/how-to-group-blog-post-into.html on how you can group posts under labels, and if you need any further help, feel free to ask.

      Delete
  2. I have this but it is only showing one submenu? and I want to change the colors? please see my site for help
    UniqueDesignsAndFinds(dot)com

    ReplyDelete
    Replies
    1. This is the line that is responsible for the drop down
      <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>
      Adding the code to any line and </li> at the end of the line, will create a new drop down, and #000000 represent the hex color code each part or the menu, try using our HTML Editor and Hex color code generator, you will find them under our tools at the menu bar.

      Delete
  3. How to centre the menu?? The menu is defaultly on the left side of the page.

    ReplyDelete

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger