cara membuat menu drop down

pasang crip di bawah ini di atas ]]></b:skin>

• #catmenucontainer{
  height:33px;
  width:1000px;
  margin:0 auto;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLDHNfs7B6U0NuOL47I-GaOVaFW4iRBTMy1m-PvcmVgW7zwWayMs9xeYLn9nq6QtbJ61kS8FyyWQZIGS_LVzZrCs9h9yxuTmZ4iMJpW_6fdA4-t95u_Y1XYHh58RaTm45EJD_g3EF_NyJl/) repeat-x;
  display:block;
  padding:0px 0 0px 0px;
  font-size:12px;
  font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
  font-weight:normal;
  border-top:1px solid #252424;
  }
  
  
  #catmenu{
  margin: 0px;
  padding: 0px;
  width:1000px;
  background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLDHNfs7B6U0NuOL47I-GaOVaFW4iRBTMy1m-PvcmVgW7zwWayMs9xeYLn9nq6QtbJ61kS8FyyWQZIGS_LVzZrCs9h9yxuTmZ4iMJpW_6fdA4-t95u_Y1XYHh58RaTm45EJD_g3EF_NyJl/) repeat-x;
  height:33px;
  }
  
  
  #catmenu ul {
  float: left;
  list-style: none;
  margin: 0px;
  padding: 0px;
  }
  
  
  #catmenu li {
  float: left;
  list-style: none;
  margin: 0px;
  padding: 0px;
  }
  
  
  #catmenu li a, #catmenu li a:link, #catmenu li a:visited {
  color: #fae7df;
  display: block;
  margin: 0px;
  padding: 9px 10px 10px 10px;
  }
  
  
  #catmenu li a:hover, #catmenu li a:active {
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf1S3ZirOlIdoiJE-P0AlPSZR2IddgJgvC5ZsNBucf-rPQ8KKXk-6w5vg5eOHqsEqyE8_SlHlfWg3biwj9QlOnyUxZt7FcMzAAajerulJhHZkvPZWZyovLvCKjPEP03DppTAhW77Jyz_v_/) repeat-x;
  color: #fff;
  margin: 0px;
  padding: 9px 10px 10px 10px;
  text-decoration: none;
  }
  
  
  #catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
  background:#ED4A05;
  width: 150px;
  color: #fae7df;
  font-family:Tahoma,century gothic,Georgia, sans-serif;
  font-weight: normal;
  float: none;
  margin: 0px;
  padding: 9px 10px 10px 10px;
  border-bottom: 1px solid #FF7800;
  
  
  }
  
  
  #catmenu li li a:hover, #catmenu li li a:active {
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf1S3ZirOlIdoiJE-P0AlPSZR2IddgJgvC5ZsNBucf-rPQ8KKXk-6w5vg5eOHqsEqyE8_SlHlfWg3biwj9QlOnyUxZt7FcMzAAajerulJhHZkvPZWZyovLvCKjPEP03DppTAhW77Jyz_v_/) repeat-x;
  color: #fff;
  padding: 9px 10px 10px 10px;
  }
  
  
  #catmenu li ul {
  z-index: 9999;
  position: absolute;
  left: -999em;
  height: auto;
  width: 170px;
  margin: 0px;
  padding: 0px;
  }
  
  
  #catmenu li li {
  }
  
  
  #catmenu li ul a {
  width: 140px;
  }
  
  
  #catmenu li ul a:hover, #catmenu li ul a:active {
  }
  
  
  #catmenu li ul ul {
  margin: -34px 0 0 170px;
  }
  
  
  #catmenu li:hover ul ul, #catmenu li:hover ul ul ul,
  #catmenu li.sfhover ul ul, #catmenu li.sfhover ul ul ul {
  left: -999em;
  }
  
  
  #catmenu li:hover ul, #catmenu li li:hover ul,
  #catmenu li li li:hover ul, #catmenu li.sfhover ul,
  #catmenu li li.sfhover ul, #catmenu li li li.sfhover ul {
  left: auto;
  }
  
  
  #catmenu li:hover, #catmenu li.sfhover {
  position: static;
  }
  kemudian pasang script dibawah ini pada widget blogspot
• <div id='catmenucontainer'>
  <div id='catmenu'>
  
  
  <ul>
  <li><a href='http://NAMA LINK BLOG ANDA/'>Home</a></li>
  <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1</a>
  <ul class='children'>
  <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-1</a></li>
  <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-2</a></li>
  <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-3</a></li>
  </ul>
  </li>
  <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2</a>
  <ul class='children'>
  <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-1</a></li>
  <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>
  <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>
  <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-3</a></li>
  </ul>
  </li>
  <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3</a>
  <ul class='children'>
  <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3-1</a></li>
  <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3-2</a></li>
  <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3-3</a></li>
  </ul>
  </li>
  <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-4</a></li>
  <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5</a>
  <ul class='children'>
  <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-1</a></li>
  <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-2</a></li>
  <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-3</a></li>
  <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-4</a></li>
  </ul>
  </li>
  <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-6</a>
  <ul class='children'>
  <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-6-1</a></li>
  <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-6-2</a></li>
  </ul>
  </li>
  <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-7</a></li>
  <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-8</a></li>
  </ul>
  
  </div>
  </div>
  
  
  <div class='clear'/>
  
  

Artikel yang Anda Cari: