Sep 24, 2011


Add Green Nature Theme Drop Down to Your Blog, Adding CSS Drop Down

Related tags

Add CSS Drop Down Menu Bar for Your Blog: Green Nature Theme

A drop down menu is extremely useful when you want your visitors to navigate through various categories & sub categories. Menu bar makes your site organized & presentable.

In my previous article How to add professional CSS navigational menu bar , i wrote about how can you add professional horizontal menu bar & someone asked me if is it possible to add the drop down for the same. Yes, it is possible. It was easy to create drop downs for the same but i decided to create something better and i am very happy to post my first drop down menu bar. I have named the theme as Green Nature drop down menu theme.


Green looks soothing and really makes me happy and that's why i have created my first drop down in green.


How to add Green Nature Drop Down ?


Step 1: Go to Blogger >> Template >> Edit HTML

Step 2:  Add following code in the template wherever you want your menu bar to appear.

<ul class="dropdown">
 <li><a href="link1"><span>Title1</span></a></li>
 <li><a href="link2"><span>Title2</span></a>
     <ul>
     <li><a href="Sub Link1">Sub Link1</a></li>
     <li><a href="Sub Link2">Sub Link2</a></li>
     <li><a href="Sub Link3">Sub Link3</a></li>
     </ul>
 </li>
 <li><a href="link3"><span>Title3</span></a></li>
 <li><a href="link4"><span>Title4</span></a></li>
   <ul>
     <li><a href="Sub Link1">Sub Link1</a></li>
     <li><a href="Sub Link2">Sub Link2</a></li>
 </ul>
 <li><a href="link5"><span>Title5</span></a></li>
</ul>

Replace link1 by your first link (ex. http://www.google.com) and title by your title (ex. this is Google!!). You can add more links in the same manner.

Step 3:   Press 'Ctrl+f' key and serch ']]></b:skin>'


Step 4: Please add the following code just before ]]></b:skin>  

.dropdown{
 border:none;
 border:0px;
 margin:0px;
 padding:0px;
 font: 67.5% Georgia;
 font-size:17px;
 font-weight:bold;
 }
.dropdown ul{
 background:url(http://img708.imageshack.us/img708/8938/menuule.png) repeat-x;height:40px;
 height:38px;
 list-style:none;
 margin:0;
 padding:0;
 }
 .dropdown li{
  float:left;
  padding:0px;
  }
 .dropdown li a{
  background:url(http://img708.imageshack.us/img708/8938/menuule.png) repeat-x;height:38px;
  color:#cccccc;
  display:block;
  font-weight:normal;
  line-height:42px;
  margin:0px;
  padding:0px 25px;
  text-align:center;
  text-decoration:none;
  }
  .dropdown li a:hover, .dropdown ul li:hover a{
   background: url(http://img832.imageshack.us/img832/9115/menulihovery.png) repeat-x;height:38px;
   color:#FFFFFF;
   text-decoration:none;
   }
 .dropdown li ul{
  background:#333333;
  display:none;
  height:auto;
  padding:0px;
  margin:0px;
  border:0px;
  position:absolute;
  width:225px;
  z-index:200;
  /*top:1em;
  /*left:0;*/
  }
 .dropdown li:hover ul{
  display:block;
  
  }
 .dropdown li li {
  background:url(http://img687.imageshack.us/img687/3765/menulili.png) repeat-x;height:38px;
  display:block;
  float:none;
  margin:0px;
  padding:0px;
  width:225px;
  }
 .dropdown li:hover li a{
  background:none;
  
  }
 .dropdown li ul a{
  display:block;
  height:35px;
  font-size:12px;
  font-style:normal;
  margin:0px;
  padding:0px 10px 0px 15px;
  text-align:left;
  }
  .dropdown li ul a:hover, .dropdown li ul li:hover a{
   background:url(http://img268.imageshack.us/img268/5686/menuliulhover.png) repeat-x;height:38px;
   border:0px;
   color:#ffffff;
   text-decoration:none;
   }
 .dropdown p{
  clear:left;
  }


Step 5: Your code should look like this..
<!-- Add your Green Nature Drop Down Code Here -->
]]></b:skin>

Step 6: Save the template now and take a look at your blog.


Comments

Post A Comment