Membuat Menu Navigasi Dengan Sub-Menu

 "Sorry bgt sob" itu kata2 pertama yang harus ARiiiiE ucapkan hahaha. Tutorial ini seharusnya kemaren ARiiiiE posting, tapi mau gimana lg sob, kemaren ada masalah jd g' sempat postingnya. OK, tanpa panjang cerita kita langsung aja ke TKP.

Langsung masuk ke rancangan sob terus element laman lalu tambah gadget HTML/Javascript
masukkan kode berikut :

<style>
#NavbarMenu { background: #000; width: 874px; height: 35px; font-size: 13px; font-family: Arial, Tahoma, Verdana; color: #fff; font-weight: bold; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 874px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { background: #808080; height: 24px; color: #fff; display: block; font-size: 14px; font-family: trebuchet ms, Times New Roman; font-weight: bold; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #c0c0c0; color: #000; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #c0c0c0; width: 150px; color: #000; font-size: 14px; font-family: trebuchet ms, Times New Roman; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #000; color: #fff; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { position: static; }

</style>

<ul id='nav'>

<li><a href='http://www.ariiiie.co.tv'>Home</a> </li>

<li>

<a href="http://www.ariiiie.co.tv/search/label/Info Menarik?updated-max&max-results=8#" title="Berisi berbagai info menarik, aneh, unik, yang harus sobat ketahui">Info Menarik</a>

 </li>

<li><a href="http://www.ariiiie.co.tv/search/label/Sains Teknologi?updated-max&max-results=6#">Sains &Teknologi</a>

</li>

<li><a href="http://www.ariiiie.co.tv/search/label/Tutorial?updated-max&max-results=6#">Tutorial</a>

<ul>

<li><a href="http://www.ariiiie.co.tv/search/label/Tip Trik Blogging?updated-max&max-results=6#">Tip Trik Blog</a>

</li>

<li><a href="http://www.ariiiie.co.tv/search/label/Facebook?updated-max&max-results=6#">Facebook</a>

</li>

<li><a href="http://www.ariiiie.co.tv/search/label/Tutorial Lain?updated-max&max-results=6#">Tutorial Lain</a>

</li>

</ul>

</li>

<li><a href="http://www.ariiiie.co.tv/search/label/movie?updated-max&max-results=6#">Movie</a>

<ul>

     <li><a href="http://www.ariiiie.co.tv/search/label/Movie Luar Negeri?updated-max&max-results=6#">Movie Luar Negeri</a></li>

      <li><a href="http://www.ariiiie.co.tv/search/label/Movie Indonesia?updated-max&max-results=6#">Movie Indonesia</a></li>

      </ul></li>

<li><a href="http://www.ariiiie.co.tv/search/label/Software?updated-max&max-results=6#">Software</a>

<ul>

<li><a href="http://www.ariiiie.co.tv/search/label/Game?updated-max&max-results=6#">Game</a>

</li>

    <li><a href="http://www.ariiiie.co.tv/search/label/Antivirus?updated-max&max-results=6#">Antivirus</a></li>

<li><a href="http://www.ariiiie.co.tv/search/label/Download manager?updated-max&max-results=6#">Download Manager</a></li>

<li><a href="http://www.ariiiie.co.tv/search/label/Software Menarik?updated-max&max-results=6#">Software Menarik</a></li>

</ul>

</li>

<li><a href="http://www.ariiiie.co.tv/search/label/Musik?updated-max&max-results=6#">Musik</a></li>

       <li><a href="http://www.ariiiie.co.tv/label/Edukasi?updated-max&max-results=6#">Edukasi</a>

<ul>

<li><a href="http://www.ariiiie.co.tv/search/label/Matematika?updated-max&max-results=6#">Matematika</a>

</li>

</ul>

</li>

<li><a href="http://www.ariiiie.co.tv/search/label/Berita?updated-max&max-results=6#">Berita</a>

<ul>

<li><a href="http://www.ariiiie.co.tv/search/label/Berita Nasional?updated-max&max-results=6#">Berita Nasional</a></li>

<li><a href="http://www.ariiiie.co.tv/search/label/Berita Internasional?updated-max&max-results=6#">Berita Internasional</a></li>

</ul>

</li>

</ul>

Jangan Lupa sob ganti url diatas dengan url blog sobat......
kalau ada pertanyaan silakan tanyakan sob...