Drop down Menu is very important to make professional blog
or website. However, because of the lack of proper information some blogger don’t use this feature in there blog. Also, many people even think that it is quite difficult to put menu bar with sub menus on their Blog. Well, if you think to put Drop down Menu on your blog easily then you are in right place. In this video i will show you step by step tutorial how to put Drop down Menu with sub-menus in Blogger using HTML and CSS.
We will start menu designing by creating a container using a div box. My div box will contain id of navigation. A navigation menu always requires Standard HTML as a basic tool for menu designing. In following script we will use a div tag, <ul> and <li> tags and create menu options.
Following listed script will display simple vertical menu with sub menu, which compile the basic idea of menu designing.
Add this Code in CSS Section
/* ----- Add it on custom CSS file ----- */
#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;}
Add This Code in your Layout Section Cross Colum
<!--Dropdown Menu beginning-->
<ul id='cssnav'>
<li class="active"><a href='techforu007.blogspot.com'>
Home</a></li>
<li class="sub"><a href='#'>Menu-1</a>
<ul>
<li><a href='#'>Submenu-1</a></li>
<li><a href='#'>Submenu-2</a></li>
<li><a href='#'>Submenu-3</a></li>
</ul>
</li>
<li><a href='#'>Menu-2</a>
<ul>
<li><a href='#'>Submenu-1</a></li>
<li><a href='#'>Submenu-2</a></li>
<li><a href='#'>Submenu-3</a></li>
<li><a href='#'>Submenu-4</a></li>
</ul>
</li>
<li><a href='#'>Menu-4</a>
<ul>
<li><a href='#'>Submenu-1</a></li>
<li><a href='#'>Submenu-2</a></li>
<li><a href='#'>Submenu-3</a></li>
<li><a href='#'>Submenu-4</a></li>
<li><a href='#'>Submenu-5</a></li>
</ul></li>
<li><a href='#'>Menu-5</a>
<ul>
<li><a href='#'>Submenu-1</a></li>
<li><a href='#'>Submenu-2</a></li>
<li><a href='#'>Submenu-3</a></li>
</ul>
</li>
<li><a href='#'>Menu-6</a>
</li></ul>
<!--Dropdown Manu end-->
