DropDown menu to Blogger

Dropdown menu is always interesting to put on the blog. Especially blogs on Blogspot hosting. Blogspot gives breadth to the user to enter various codes either CSS or Javascript.

Today, a friend ask how to make a dropdown menu?

Adding it directly ..

FIRST:

Go to Edit HTML Templates ----- ----- Do not forget to do backups template ----- then check the 'Expand Widget Templates' and then look for the code:

]]></b:skin>

and then copy code below and put it in the above that code , save the template

<style type="text/css"> /*---------------------    c2elmo menu ------------------------*/ #menufs-wrapper {  width:100%; height:27px;  background: #2C314E url('') repeat-x top left;  border-top:1px solid #3A468B;  padding-left:0px;  margin-bottom:9px;  overflow:hidden;} #menufs-wrapper h2 {display:none}   #menufs, #menufs ul {  padding: 0px; margin: 0;  list-style: none;  font: normal 0.95em arial;  color:#fff;} #menufs a {  display: block;text-decoration:  none; padding: 6px 9px 7px 9px;  border-right: 1px solid #2C314E;  border-left: 1px solid #707DC3;  color: #Fff;   background: #2C314E url(' ') repeat-x top left;} #menufs a.start {  padding: 0px;  border-left: 0px none;  width: 90px;  height:27px;  background: #2C314E url(' ') no-repeat;} #menufs a.start:hover{ background: #2C314E url(' ') no-repeat;} #menufs a.start em {display:none;} #menufs a.IMenu {font-weight:bold; text-transform:uppercase;} #menufs a.last {  padding: 0px; border-left: 0px none;  border-left: 0px none;  border-right: 0px none;  width: 27px; height:27px;  background: #2C314E url(' ') no-repeat;} #menufs a.last:hover { background: #2C314E url('') no-repeat;} #menufs a.last em {display:none;} #menufs li {float: left;width: 9em;} #menufs li.last{border-left: 1px solid #7A86C7; height:27px; width: 1px; padding: 0px} #menufs li.last em{display:none;} #menufs li.right{float: right; border-left: 0px none;} #menufs li ul, #menufs ul li  {width: 12em;} #menufs ul li a  {  color: #565656;border-left: 0px none;  border-right: 0px none;  padding-left:5px;  padding-right:10px;  padding-top:5px;  padding-bottom:5px} #menufs li ul { position: absolute;  display: none;  background-color: #02254C;  z-index:200;border-right: 1px solid #A8C4C4;  border-left: 1px solid #A8C4C4;  border-bottom: 1px solid #A8C4C4; margin-left:0px;text-align: left;} #menufs li:hover a, #menufs a:focus, #menufs a:active{color: #000000; background-color: #CADBDB;  background-image:url(''); background-repeat:repeat-x} #menufs li:hover ul{display: block;} #menufs li:hover ul a{color: #003366; border-top:1px solid #A8C4C4; background-image:url('none');} #menufs ul a:hover {background-color: #02254C!important;color: #FFF!important;} #menufs li {width: auto;} </style>

SECOND:
Entered on the Template page --- --- elements and create a new elemet or click on "Add a Page Element" --- of course find the location of widgets (gadgets) are next to the page position. Select "HTML / Javascript" --- and enter the code below. Previously you edit with your own menu links.

<div id="menufs-wrapper"><br /> <ul id="menufs">    <li><a class="IMenu" href="http://www.blogger.com/">Home</a></li> <!-- Menu Home -->   <li><a class="IMenu" href="http://www.blogger.com/*">Software</a><!-- Induk Menu --><br />   <ul>   <li><a href="http://www.blogger.com/*" title="Utility">Utility</a></li>    <li><a href="http://www.blogger.com/*" title="Antivirus">Antivirus</a></li>    <li><a href="http://www.blogger.com/*" title="Windows">Windows</a></li>   </ul><br />  </li>   <li><a class="IMenu" href="http://www.blogger.com/*">Tutorial</a><!-- Induk Menu --><br />     <ul>      <li><a href="http://www.blogger.com/*" title="Template web">Blogger</a></li>    <li><a href="http://www.blogger.com/*">SEO</a></li>   </ul><br />  </li>      <li><a *="" class="IMenu" href="">Download</a><!-- Induk Menu --><br />   <ul>   <li><a href="http://www.blogger.com/*" title="Download Software">Software</a></li>    <li><a href="http://www.blogger.com/*">e-Book</a></li>    <li><a href="http://www.blogger.com/*">Musik</a></li>     </ul><br />  </li>   <li><a class="IMenu" href="http://www.blogger.com/*" title="Tips And Triks">Tips And Triks</a><!-- Induk Menu --><br />   <ul>   <li><a href="http://www.blogger.com/*">Manajemen</a></li>    <li><a href="http://www.blogger.com/*" title="Bikin Drop Down Menu">Menu</a></li>       </ul><br />  </li>   <li><a class="IMenu" href="http://www.blogger.com/*">News</a> </li> <!-- input in the widget page elements Until this -->     <li class="last"></li> <li><!-- Don--><br />  </li> </ul></div><!-- end menufs-wrapper -->

This is code fore free use and modify, good luck