How to make a drop down menu for blogger

One day I suddenly decided to have my own blog, that too on blogger. I think my choice was because of simple web interface and simple to use mobile app, which I was planning to blog with. But unlike wordpress, blogger does not have drop down menu by default. So I decided I needed these:

1. Set up labels so that posts can be categorized and made selectable
2. Set up a menu consisting of these labels
3. Have drop down sub menus, also made up with labels
4. Have a couple of pages, namely work-samples and contact me, also as part of the menu.

Here is a shot of what was the final product [Maybe my blog still looks like this]

Now, that I have explained the whole situation, here are the steps to be followed for the above result:

1. The menu is a gadget. So first step is to open the layout section and click on the 'Add a Gadget' Button.

2. Now you will see a window that lets you choose from various gadgets to add from. From the list, choose HTML/JavaScript

3. Once you have added the gadget move it from the sidebar area, into the header area. Place it just under the header. Now click on the edit button. A window will open, which will allow you to add your own custom code for the menu. 

4. This custom code will include to parts, HTML and CSS. In the HTML part, we will make the body of the menu. This will be a list which will make up your menu. Below is dummy code for the same.

1. <div id="shekhoo-nav-container">   
2.       <div id="shekhoo-nav">
3.         <ul>
4.           <!-- A menu item with no drop down items -->
5.           <li><a href="http://example.com/">HOME</a></li>
6.           <!-- A menu item with drop down items -->
7.           <li><a href="http://example.com/search/label/example-label">EXAMPLE-LABEL</a>
8.            <ul>
9.                    <!-- two drop down sub-items -->
10.                    <li><a href="http://example.com/search/label/sub-label">SUB-LABEL</a></li>
11.                    <li><a href="http://example.com/search/label/sub-label">SUB-LABEL</a></li>
12.            </ul>
13.           </li>
14.         </ul>
15.       </div>  
16.     </div>

In the above code, I have used both type of menu items. One with no sub menu and one with sub menu. You can use these samples to create as as many as you like[although that is limited by the width of the page and your blog]

5. Now that we are done with the html, we have to compile the CSS. Here is the code for CSS. 

1. <style> 
2.       #shekhoo-nav-container
3.       {
4.         width:100%;
5.         height:auto;
6.         z-index:+999;
7.         position:absolute;
8.         top:-50px; 
9.     }   
10.       #shekhoo-nav
11.       {
12.         width:100%;
13.         height:32px;
14.       }     
15.       #shekhoo-nav a
16.       {
17.        color:#FFF;
18.         text-decoration:none;
19.         padding-left:5px;
20.         border:none;
21.         width:128px;
22.       }     
23.       #shekhoo-nav a:hover
24.       {
25.        color:#000;
26.         background-color:none;
27.       }     
28.       #shekhoo-nav ul
29.       {
30.         padding:0px;
31.         margin:0px;
32.         list-style:none;
33.         border:none;
34.       }    
35.       #shekhoo-nav ul li
36.       {
37.         width:145px;
38.         text-align:center;
39.         float:left;
40.         border:none;
41.         background-image:url(transparent-bg-blue.png);
42.       }     
43.       #shekhoo-nav ul li ul li
44.       {
45.         height:0px;
46.         float:none;
47.         width:200px;
48.         text-align:left;
49.       }
50.       #shekhoo-nav ul li:hover ul li
51.       {
52.          height:auto;
53.       } 
54.     </style>

The above can be used as is, for the HTML code give in the previous point. Now, there have to be some adjustments here, like:

a. The width of the li and a elements, which has to be according to the width of your page. You have to  adjust that.

b. The position of the nav-container, which, in my case is set to make the menu appear a little on inside the region of the header image. You will have to adjust that too.

c. The background image of the li is a semi opaque png image with blue color and 70% opacity. You can make such an image in photoshop.

6. Once you are done compiling both of these, make sure to place the css code, before the HTML code.

I hope this method works for you. If you have any issues, feel free to comment.