How To add drop down menu in blogger
Follow the following steps to create a drop down menu in Blogger:
1. In the Blogger dashboard, go to Layout
2. Click on Add a Gadget
3. Select HTML/JavaScript
4. Under Content, paste the following code
<div id='menubar'>
<ul id='menus'>
<li>
<a href='#'>MenuItem</a>
</li>
<li>
<a href='#'>MenuItem</a>
</li>
<li>
<a href='#'>MenuItem</a>
</li>
<li>
<a href='#'>MenuItem</a>
<ul>
<li><a href='#'>SubMenuItem</a></li>
<li><a href='#'>SubMenuItem</a></li>
<li><a href='#'>SubMenuItem</a></li>
</ul>
</li>
</ul>
</div>
5. Replace MenuItem with the appropriate menu label
6. Replace SubMenuItem with the appropriate sub-menu label
7. Replace # with the appropriate URL
8. Click Save
9. Move the HTML/Javascript object to where you want the menu to appear
10. Click Save arrangement
11. Click on Template
12. Click Edit HTML
14. Search for the following line:
]]></b:skin>
15. Paste the following code directly above that line
/*-------- Begin Drop Down Menu -------*/
#menubar {
background: #FF0000;
width: 1000px;
color: #A4F2E9;
margin: 0px;
padding: 0;
position: relative;
border-top:1px solid #FF8A33;
height:35px;
}
#menus {
margin: 0;
padding: 0;
}
#menus ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#menus li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #FF7733;
border-right:1px solid #FF7733;
height:35px;
}
#menus li a, #menus li a:link, #menus li a:visited {
color: #25BD04;
display: block;
font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#menus li a:hover, #menus li a:active {
background: #FFFD99; /* Menu hover */
color: #BED50D;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#menus li {
float: left;
padding: 0;
}
#menus li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#menus li ul a {
width: 140px;
}
#menus li ul ul {
margin: -25px 0 0 160px;
}
#menus li:hover ul ul, #menus li:hover ul ul ul, #menus li.sfhover ul ul, #menus li.sfhover ul ul ul {
left: -999em;
}
#menus li:hover ul, #menus li li:hover ul, #menus li li li:hover ul, #menus li.sfhover ul, #menus li li.sfhover ul, #menus li li li.sfhover ul {
left: auto;
}
#menus li:hover, #menus li.sfhover {
position: static;
}
#menus li li a, #menus li li a:link, #menus li li a:visited {
background: #28E8DC; /* drop down background color */
width: 120px;
color: #F4240A;
display: block;
font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px solid #1A6680;
}
#menus li li a:hover, #menusli li a:active {
background: #130000; /* Drop down hover */
color: #B2F7CC;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
/*-------- End Drop Down Menu -------*/
I hope this will help you become a greater publisher!!!
Enjoy your high school with - High School Pedia : www.highschoolpedia.com
Comments
Post a Comment