cara membuat Menu dan Submenu

kali ini saya akan mepostingkan pengalaman saya untuk kalian cara membuat menu dan submenunya 
caranya sangat mudah tingga kita jeli saja dalam pembuatannya tetapi sekarang ini lebih mudah karena sudah ada menu horizontal yang suadah jadi tinggal kita isi saja dengan ke inginan kita sendiri

begini caranya :
- pertama kita masuk ke template
- kemudian edit HTML
- cari kode

  </div>
    </div>
<style>

<div class='main-outer'>

- copy paste kode di bawah ini :  tepat di atas kode   <div class='main-outer'>

/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}
#cat-nav a { color:#eee; text-decoration:none; text-shadow: #424242 0px 1px 0px;border-right:1px solid #156994;}
#cat-nav a:hover { color:#fff; }
#cat-nav li:hover { background:#1feb15; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#fff; }
#secnav, #secnav ul { position:relative; z-index:200; margin:0; padding:0; list-style:none; line-height:1; background:#156994; }
#secnav a { font-family:Georgia, &quot;Times New Roman&quot;, Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}
#secnav li { float:left; width: auto; height:35px;}
#secnav li ul  { position: absolute; left: -999em; width: 300px; top:35px}
#secnav li ul li  { height:30px; border-top:1px solid #fff; }
#secnav li ul li a  { font-family:Verdana, Geneva, sans-serif; width:280px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }
#secnav li ul ul  { margin: -30px 0 0 280px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav li:hover,#secnav li.hover  { position:static; }
#cat-nav #secnav {width:100%;margin:0 auto;}
</style>
<div id='cat-nav'>
<ul class='fl' id='secnav'>
<li><a href='http://dagujang.blogspot.com/'><b><blink>@</blink></b></a></li>
 <li><a href='#'>terbaru</a></li>
<li><a href='#'>menu A</a>
<ul id='sub-custom-nav'>
 <li><a href='#'>Submenu A1</a></li>
<li><a href='#'>Submenu A2</a></li>
</ul>
</li>
<li><a href='#'>menu B</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Submenu B1</a></li>
<li><a href='#'>Submenu B2</a></li>
</ul>
</li>
<li><a href='#'>menu C</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Submenu C1</a></li>
<li><a href='#'>Submenu C2</a></li>
</ul>
</li>
<li><a href='http://dagujang.blogspot.com/'><b><blink>#</blink></b></a></li>
</ul>
</div>

- setelah di paste ganti tanda # dengan URL dan tulisan berwarna hijau dengan judul URL
- simpan template
- lihat hasil jadinya
sekian mudah mudahan lancarnya sahabat