Cara membuat menu dropdown

      kali saya ingin membahas...bagaimana caranya membuat menu dropdown.memang bagi yang baru memuai ngeblog mungkin sulit banget ya membuat ini semua. tpkalau kita mau belajar gampang kok ternyata..
ok disini ada beberapa menu dropdown silahkan copypaste kode di bawah.
lalu cari kode  <div class='main-outer'> atau <div id='main-outer'>
setelah itu paste kan kode di bawah ini tepat di atas kode yang baru di cari tadi...

/*--menu dropdown--*/

#cssmenu ul {
margin: 0;
padding: 7px 6px 0;
background: #4ba7d1 url(overlay.png) repeat-x 0 -110px;
line-height: 100%;
border-radius: 1em;
font: normal 0.5333333333333333em Arial, Helvetica, sans-serif;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
width: auto;
}
#cssmenu li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
#cssmenu a,
#cssmenu a:link {
font-weight: bold;
font-size: 13px;
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
#cssmenu a:hover {
background: #CCC;
color: #fff;
}
#cssmenu .active a,
#cssmenu li:hover > a {
background: #74bbdb url(overlay.png) repeat-x 0 -40px;
background: #CCC url(overlay.png) repeat-x 0 -40px;
color: #444;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
text-shadow: 0 1px 0 #ffffff;
}
#cssmenu ul ul li:hover a,
#cssmenu li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#cssmenu ul ul a:hover {
background: #4ba7d1 url(overlay.png) repeat-x 0 -100px !important; vcolor: #fff !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
#cssmenu li:hover > ul {
display: block;
}
#cssmenu ul ul {
z-index: 1000;
display: none;
margin: 0;
padding: 0;
idth: 200px;
position: absolute;
top: 40px;
left: 0;
background: #6CF url(overlay.png) repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
#cssmenu ul ul li {
float: none;
margin: 0;
padding: 3px;
}
#cssmenu ul ul a,
#cssmenu ul ul a:link {
font-weight: normal;
font-size: 14px;
}
#cssmenu ul:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
* html #cssmenu ul {
height: 1%;
}


#<ul id='cssmenu'>
      <ul>
        <li class='active'><a href='index.html'><span>Home</span></a></li> 
        <li class='has-sub'><a href='#'><span>Tips Dan Trik</span></a>
          <ul>
          <li><a href='#'><span>submenu A</span></a></li>
            <li><a href='#'><span>submenu1 A</span></a></li>
            <li><a href='#'><span>submenu2 A</span></a></li>
            <li class='last'><a href='#'><span>submenu3 A</span></a></li>
          </ul>
         </li>
          <li class='has-sub'><a href='#'><span>Info Harga</span></a>
            <ul>
             <li><a href='#'><span>submenu A</span></a></li>
            <li><a href='#'><span>submenu1 A</span></a></li>
            <li><a href='#'><span>submenu2 A</span></a></li>
            <li class='last'><a href='#'><span>submenu3 A</span></a></li>
          </ul>
       </li>
        <li class='has-sub'><a href='#'><span>Resep Masakan</span></a>
           <ul>
             <li><a href='#'><span>submenu A</span></a></li>
            <li><a href='#'><span>submenu1 A</span></a></li>
            <li><a href='#'><span>submenu2 A</span></a></li>
            <li class='last'><a href='#'><span>submenu3 A</span></a></li>
          </ul>
       </li>
        <li class='has-sub'><a href='#'><span>Produk Unik</span></a></li>
        <li class='last'><a href='#'><span>Contact Us</span></a></li>
      </ul>
   </ul>
catatan: yang saya kasih warna merah ( #4ba7d1) ini untuk mengganti warna bacground menu,
dan yang berwarna biru (#6CF)  ini untuk mengganti warna background submenu.