How to Create a Drop Down Menu in Blogger

Drop down menu or sub menu is very important for a blog or website.

CODE:

• Home
• Menu-1
  • Submenu-1
  • Submenu-2
  • Submenu-3
• Menu-2
  • Submenu-1
  • Submenu-2
  • Submenu-3
  • Submenu-4
• Menu-4
  • Submenu-1
  • Submenu-2
  • Submenu-3
  • Submenu-4
  • Submenu-5
  • Submenu-6
• Menu-5
  • Submenu-1
  • Submenu-2
  • Submenu-3
• Menu-6

Style CSS: 

/* ----- CSS Nav Menu Styling ----- */
#cssnav {
 margin: 0px 0 0 -10px; padding: 0px 0px 0px 0px; width: 1050px; /* Set your width to fit your blog */ font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */ color: $(tabs.text.color); /* Template Designer - Change Font Size */
}

 #cssnav ul {
 background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px; _background-image: none; /* Template Designer - Change Menu Background */ height: 20px; /* Change Height of Menu */ list-style: none; margin: 0px; padding: 0px;
}

 #cssnav li {
 float: left;
padding: 0px;
}

#cssnav li a {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px; _background-image: none; /* Template Designer - Change Menu Background */ display: block; margin: 0px; font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */ text-decoration: none;
}

 #cssnav > ul > li > a {
 color: $(tabs.text.color); /* Template Designer - Change Font Color */
 }

#cssnav ul ul a {
color: $(tabs.text.color); /* Template Designer - Change Color */
}

 #cssnav li > a:hover, #cssnav ul li:hover {
 color: $(tabs.selected.text.color); /* Template Designer - Change Font Color on Hover */ background-color: $(tabs.selected.background.color); /* Template Designer - Change Font Background on Hover */ text-decoration: none;
}

 #cssnav li ul {
 background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px; _background-image: none; /* Template Designer - Change Menu Background */ display: none; height: auto; padding: 0px; margin: 0px; position: absolute; width: 200px; /* Change Width Of DropDown Menu */ z-index:9999;
 }

 #cssnav li:hover ul {
 display: block;
 }

 #cssnav li li {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px; _background-image: none; /* Template Designer - Change Background */ display: block; float: none; margin: 0px; padding: 0px; width: 200px; /* Change Width Of DropDown Menu */
 }

 #cssnav li:hover li a {
 background: $(tabs.selected.background.color); /* Template Designer - Change Background of Link on Hover */
}

 #cssnav li ul a {
 display: block; height: auto; margin: 0px; padding: 10px; text-align: left; } #cssnav li ul a:hover, #cssnav li ul li:hover > a { color: $(tabs.selected.text.color); /* Template Designer - Change Text Color on Hover */ background-color: $(tabs.selected.background.color); /* Template Designer - Change Background on Hover */ border: 0px; text-decoration: none;
}

 #blog-pager{
clear:both;margin:30px auto;text-align:center; padding: 7px;
}

.blog-pager {
background: none;
}

.displaypageNum a,.showpage a,.pagecurrent{
font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;
}
 .displaypageNum a:hover,.showpage a:hover, .pagecurrent{
background:#359BED;text-decoration:none;color: #fff;
 }
 #blog-pager .pagecurrent{
font-weight:bold;color: #fff;background:#359BED;
 }
 .showpageOf{
display:none!important
}

#blog-pager .pages{border:none;}

Video