Drop down Menu is something which everyone wants to have on his blog. However, because of the lack of proper information they can't have it on their blogs. Again, many people even think that it is quite hard to put menus with sub menus on any Blog. Well, this is not so. Here, in this tutorial we will tell you on how to add sub menu to your Menu step by step for your Blog.
Step 4: It will open a new window. Press (+) icon against the HTML/JavaScript. It will open a html/JavaScript box.
How To Add Drop Down Menu in to Your Blog
Click here to watch on how to apply this method into your blog.
Step 1: First, go to your Blogger dashboard and select the blog in which you want to add the Drop Down Menu.
Step 2: Go to the Layout option which is present in the left sidebar of your blog. A screenshot is shown below:
Step 3: It will open up a new window. Select Add a Gadget here just below the Header option which is shown below encircled in red color in the screenshot.
Step 5: Copy the Code given below.
Step 6: Now, press Save and and then Save Arrangement. This code will be applied to your blog.
Step 7: Now, click on Template present just below the Layout option. Now, click on Customize button. It will open a new window just like the below screenshot.
Step 8: Now, go to the Advanced option at top left side and click on it. It will open a new menu just right of it. Scroll down and select Add CSS. Both Advanced and Add CSS option are shown above encircled in green and blue color respectively. In the right Side you see a blank space.
Step 9: Copy the code written below and paste it into the white space.
#cssnav {
float: left;
font: bold 12px Verdana, Helvetica, Sans-serif;
border: 2px solid #74BA94;
border-top: 1px solid #747BBA;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
overflow: hidden;
}
#cssnav ul {
margin:0;
padding:0;
list-style:none;
}
#cssnav ul li {
float:left;
}
#cssnav ul li a {
float: left;
color:#EA1047;
padding: 10px 20px;
text-decoration:none;
background:#3F10EA;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
border-left: 1px solid rgba(255, 255, 255, 0.05);
border-right: 1px solid rgba(0,0,0,0.2);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}
#cssnav ul li a:hover,
#cssnav ul li:hover > a {
color: #252525;
background:#3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;
}
#cssnav li ul a:hover,
#cssnav ul li li:hover > a {
color: #2c2c2c;
background: #5C9ACD;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) );
background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
border-bottom: 1px solid rgba(0,0,0,0.6);
border-top: 1px solid #7BAED9;
text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}
#cssnav li ul {
background:#3C4042;
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
left: -999em;
margin: 35px 0 0;
position: absolute;
width: 160px;
z-index: 9999;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
border: 1px solid rgba(0, 0, 0, 0.5);
}
#cssnav li:hover ul {
left: auto;
}
#cssnav li ul a {
background: none;
border: 0 none;
margin-right: 0;
width: 120px;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
}
#cssnav li li ul {
margin: -1px 0 0 160px;
-webkit-border-radius: 0 10px 10px 10px;
-moz-border-radius: 0 10px 10px 10px;
border-radius: 0 10px 10px 10px;
visibility:hidden;
}
#cssnav li li:hover ul {
visibility:visible;
}
#cssnav ul ul li:last-child > a {
-moz-border-radius:0 0 10px 10px;
-webkit-border-radius:0 0 10px 10px;
border-radius:0 0 10px 10px;
}
#cssnav ul ul ul li:first-child > a {
-moz-border-radius:0 10px 0 0;
-webkit-border-radius:0 10px 0 0;
border-radius:0 10px 0 0;
}
Step 10: Press on Apply to Blog present at the top right corner and you are done. Press View Blog and see the changes you have made just Now.
Conclusion
I tried to make this tutorial very simple and helpful. It will surely work. However, if anyone of you are facing any problem in applying this code, you could just ask in the comment box. We will try to help you according to your problem.