Blogs Hippo: Drop Down Menus

How to Add Apple Drop Down menu Lists to the Blogger, Without jquery

Dropdown menu list is easiest way to allow visitors to navigate on your site. Drop-down menu lists comes really handy when you have too much categories to show. Following drop down menu is inspired from Apple.com navigational links because I really love apple for its awesome products. Have a look at some of my navigational css menu lists.

How to add Green Nature Drop Down Theme

Add Professional Horizontal menu Listbar

Add Apple Drop Down Theme

Everybody knows Apple for their awesome i Gadgets but if you take a close look at their website, you will be able to see navigational menu list. In this article i am going to teach you how to add Apple theme drop down list.

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

Step 2: Add following code in the template wherever you want your menu list 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>

Step 5: Your code should look like this..

<!-- Add your Apple Drop Down Code Here -->
]]></b:skin>

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

[Read more]

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>

.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>