HOW TO CREATE DROPDOWN MENU / SUB PAGES IN BLOG?

See the blog that I created for kumbla dub district youth festival. This blog contains many tabs . Too many tabs make the blog less attractive.

As you you all Tabs are html pages. If I create drop down menu for certain pages,I can reduce the number of tabs. For eg: UP GENERAL, UP ARABIC , UP SANSKRIT come under UP Section.The same is the case of HS and L.P

So I did the following activities.

Step1: I copied the code given below to a text editor or word processor page.

<!-- start navmenu -->

<ul id='cssnav'>

<li class="active"> <a href=''#'>Home</a>

</li>

<li>

<a href='#'>HISTORY</a>

</li>

<li>

<a href='#'>SCHOOLS</a>

</li>

<li>

<a href='#'>COMMITTES</a>

</li>

<li>

<a href='#'>MANUAL</a>

</li>

<li>

<a href='#'>ITEM CODES </a>

</li>

<li>

<a href='#'>ITEM CODES KANNADA</a></li>

<li>

<a href='#'>L.P SECTION</a>

<ul>

<li><a href='#'>L.P GENERAL</a></li>

<li><a

href='#'>L.P ARABIC</a></li></ul>

<li> <a href='#'>U.P SECTION</a>

<ul>

<li><a href='#'>U.P GENERAL</a></li>

<li><a href='#'>U.P SANSKRIT</a></li>

<li><a href='#'>U.P ARABIC</a></li>

</ul>

<li> <a href='#'>H.S.SECTION</a>

<ul>

<li><a href='#'>H.S GENERAL</a></li>

<li><a href='#'>H.S.SANSKRITL</a></li>

<li><a href='#'>H.S ARABIC</a></li></ul>

<li> <a href='#'>H.S.S GENERAL </a>

</li>

<!-- end navmenu --></li></li></li></ul>

2.Then I changed the codes as shown below.

<!-- start navmenu -->

<ul id='cssnav'>

<li class="active"> <a href=''http://kalolsavamkumbla2014.blogspot.in'>Home</a>

</li>

<li>

<a href='http://kalolsavamkumbla2014.blogspot.in/p/history.html'>HISTORY</a>

</li>

<li>

<a href='http://kalolsavamkumbla2014.blogspot.in/p/schools_10.html'>SCHOOLS</a>

</li>

<li>

<a href='http://kalolsavamkumbla2014.blogspot.in/p/committees.html'>COMMITTES</a>

</li>

<li>

<a href='http://kalolsavamkumbla2014.blogspot.in/p/manual.html'>MANUAL</a>

</li>

<li>

<a href='http://kalolsavamkumbla2014.blogspot.in/p/item-codes-kannada.html'>ITEM CODES </a>

</li>

<li>

<a href='http://kalolsavamkumbla2014.blogspot.in/p/item-codes-kannada.html'>ITEM CODES KANNADA</a></li>

<li>

<a href='#'>L.P SECTION</a>

<ul>

<li><a href='http://kalolsavamkumbla2014.blogspot.in/p/lp-general.html'>L.P GENERAL</a></li>

<li><a

href='http://kalolsavamkumbla2014.blogspot.in/p/lp-arabic.html'>L.P ARABIC</a></li></ul>

<li> <a href='#'>U.P SECTION</a>

<ul>

<li><a href='http://kalolsavamkumbla2014.blogspot.in/p/lp-general.html'>U.P GENERAL</a></li>

<li><a href='http://kalolsavamkumbla2014.blogspot.in/p/up-sanskrit.html'>U.P SANSKRIT</a></li>

<li><a href='http://kalolsavamkumbla2014.blogspot.in/p/up-arabic.html'>U.P ARABIC</a></li>

</ul>

<li> <a href='#'>H.S.SECTION</a>

<ul>

<li><a href='http://kalolsavamkumbla2014.blogspot.in/p/hs-general.html'>H.S GENERAL</a></li>

<li><a href='http://kalolsavamkumbla2014.blogspot.in/p/hs-sanskrit.html'>H.S.SANSKRITL</a></li>

<li><a href='http://kalolsavamkumbla2014.blogspot.in/p/hs-arabic.html'>H.S ARABIC</a></li></ul>

<li> <a href='http://kalolsavamkumbla2014.blogspot.in/p/h-s-s-section.html'>H.S.S GENERAL </a>

</li>

<!-- end navmenu --></li></li></li></ul>

* to get the url of the html page (for eg.a href='http://kalolsavamkumbla2014.blogspot.in/p/hs-general.html') I clicked design --> pages. Then I clicked on view option just below the particular page.copied it and pasted it after < a href=''>.

3. Then I Added a HTML/JAVASCRIPT gadget by clicking design--> layout.Then I clicked the ‘add a gadget’ box underneath the blog header add HTML / Java Script.Selected Edit html option of the gadget and pasted the code in which I made changes (serial no:2.)

4. Next step I did was opened add css option by clicking design-->template-->customize-->advanced-->add css. I pasted the codes given below to the css and clicked apply to blog.

 /* ----- CSS Nav Menu Styling ----- */
#cssnav {
margin: 0px 0 0 -30px;
padding: 0px 0px 0px 0px;
width: 1140px;  /* 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: 15px; /* 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;
}

 Marvellous. Dropdown menus have been created for the tabs LP SECTION, U.P SECTION and HS SECTION .