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.
<!doctype html>
<div id="cssnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Submenu 3.1</a></li>
<li><a href="#">Submenu 3.2</a></li>
<li><a href="#">Submenu 3.3</a></li>
<li><a href="#">Submenu 3.4</a></li>
<li><a href="#">Submenu 3.5</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a>
<ul>
<li><a href="#">Submenu 4.1</a></li>
<li><a href="#">Submenu 4.2</a></li>
<li><a href="#">Submenu 4.3</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</!doctype>
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.
This comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThank you for helping! I applied it and it shows up on my blog... But what do I do next?
ReplyDeleteI played with hte codes and Found what was next!!! Thanks!!!
ReplyDeletethanx sir
ReplyDeleteits very helpful for me
great
Deletevery helpful!!
ReplyDeleteActually In drop down I only see one tab.
ReplyDeletegreat sir.... unbelievable trick....
ReplyDeletethanks that's great, but how do you changed the size and color :D
ReplyDeleteapply the css
Deletehi thank you for your help, i would like to know how do i change the size of the table menu, to make it larger.
ReplyDeleteWorked Great! Question: How can I get a sub sub menu? I cannot figure out what to edit in order to get it to work. Any ideas?
ReplyDeleteWhy isnt the sub menu not working to me. it seems like its hiding but i dont know what to do
ReplyDeletehow to increase width
ReplyDeletePlease kinldy hepl me guys. Why is not showing the sub-menu in my blog. All i copy the html code and css code above. Please advise. Thanks
ReplyDeleteWhat are we supposed to do with all those submenu?
ReplyDeletehow to change the background colors sir ?
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteDrop down menu is not working here is my blogsite http://www.thecitizensnews.org please help how to active this drop down menu
ReplyDelete