=>Template
=> HTML
=> Copy the following code and paste it just before :
#cssmenu {
border: none;
border: 0px;
margin: 0px;
padding: 0px;
font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet
Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
width: auto;
}
#cssmenu ul {
background: #333333;
height: 35px;
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu li {
float: left;
padding: 0px;
}
#cssmenu li a {
background: #333333 url('seperator.png') bottom right no-repeat;
display: block;
font-weight: normal;
line-height: 35px;
margin: 0px;
padding: 0px 25px;
text-align: center;
text-decoration: none;
}
#cssmenu > ul > li > a {
color: #cccccc;
}
#cssmenu ul ul a {
color: #cccccc;
}
#cssmenu li > a:hover,
#cssmenu ul li:hover > a {
background: #777777 url('hover.png') bottom center no-repeat;
color: #FFFFFF;
text-decoration: none;
}
#cssmenu li ul {
background: #333333;
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
width: 225px;
z-index: 200;
/*top:1em;
/*left:0;*/
}
#cssmenu li:hover ul {
display: block;
}
#cssmenu li li {
background: url('sub_sep.png') bottom left no-repeat;
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 225px;
}
#cssmenu li:hover li a {
background: none;
}
#cssmenu li ul a {
display: block;
height: 35px;
font-size: 12px;
font-style: normal;
margin: 0px;
padding: 0px 10px 0px 15px;
text-align: left;
}
#cssmenu li ul a:hover,
#cssmenu li ul li:hover > a {
background: #777777 url('hover_sub.png') center left no-repeat;
border: 0px;
color: #FFFFFF;
text-decoration: none;
}
#cssmenu p {
clear: left;
}
OR
Use the following:
/*-------- Begin Drop Down Menu -------*/
#menubar {
background: #8E8E8E;
width: 840px;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:1px solid #B2FFFF;
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 #1A6680;
border-right:1px solid #1A6680;
height:35px;
}
#menus li a, #menus li a:link, #menus li a:visited {
color: #FFF;
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: #130000; /* Menu hover */
color: #FFF;
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: #B3B3B3; /* drop down background color */
width: 120px;
color: #FFF;
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: #FFF;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
/*-------- End Drop Down Menu -------*/
=> Layout--->add a gadget--->HTML/ Java script.
=> Copy the following code and paste.
<div id='cssmenu'>
<ul>
<li><a href='http://onlinemoneyincomeshorttrainingprogram.blogspot.com/'><span>home</span></a></li>
<li class='has-sub'><a href='#'><span>Earn Money Online</span></a>
<ul>
<li><a href='http://onlinemoneyincomeshorttrainingprogram.blogspot.com/search/label/Earn%20Money%20Online'><span>Adsense</span></a></li>
<li><a href='http://onlinemoneyincomeshorttrainingprogram.blogspot.com/search/label/SEO'><span>SEO</span></a></li>
<li><a href='http://onlinemoneyincomeshorttrainingprogram.blogspot.com/search/label/Blogger'><span>Blogger'</span></a></li>
<li class='last'><a href='http://onlinemoneyincomeshorttrainingprogram.blogspot.com'><span>Tips & Tricks</span></a></li>
</ul>
</li>
<li><a href='http://onlinemoneyincomeshorttrainingprogram.blogspot.com'><span>Training</span></a></li>
<li class='last'><a href='http://onlinemoneyincomeshorttrainingprogram.blogspot.com'><span>About</span></a></li>
</ul>
</div>
=> Change the links as required.
=> Go to your layout and drag your very top gadget underneath your your header. Click edit on your old menu and remove it. Click "save arrangement"
