Cara Membuat Menu Horisontal Drop Down Sederhana

Beberapa waktu lalu ada pengunjung blog ini bertanya bagaimana cara membuat membuat menu navigasi yang ada pada blog ini ,tentunya untuk menjelaskan secara detil pada form komentar agak terlalu kepanjangan ,meski menu ini adalah menu yang paling sederhana yang pernah saya pasang pada blog ini ,maka tidaklah salah jika aku buatkan saja tutorialnya secara langsung dipostingan ini,ya sekalian Update artikel untuk bahan koleksi blog ini atau siapa tahu lain waktu ada pengunjuk blog yang bertanya tentang masalah yang sama .
Untuk Cara Membuat Menu Horisontal Drop Down Sederhana ini tentunya sobat harus loggin dulu ke blogger.
Untuk secara lengkap tutorialnya silahkan ikuti tutorialnya secara lengkap di bawah ini :

1. Anggap sobat sudah ada di dasboard 
2. Silahkan klik Template == Lalu Edit Html 
3. Dengan Bantuan Ctrl + F cari kode ]]></b:skin> pasang kode css di bawah ini tepat di atas kode ]]></b:skin> berikut kodenya :

   #menu {
     background: none repeat scroll 0 0 #A90329;
     height: 30px;
   }
   
   #menu ul {
     margin: 0;
     padding: 0;
   }
   
   #menu ul a {
     text-decoration: none;
   }
   
   #menu ul li {
     list-style: none;
     float: left;
     position: relative;
   }
   
   #menu ul li a {
     background: none repeat scroll 0 0 #A90329;
     color: #fff;
     display: block;
     padding: 4px;
     width: 100px;
     text-align: center;
   }
   
   #menu ul ul {
     padding: 0;
     overflow: hidden;
   }
   
   #menu ul ul li {
     float: none;
     display: none;
     border-bottom: 1px dotted red;
   }
   
   #menu ul ul li a {
     background: #A90329;
     color: #fff;
     border: none;
   }
   
   #menu ul ul li a:hover {
     background: #ccc;
     color: black;
   }
   
   #menu ul li a:hover,
   #menu ul li:hover ul li {
     display: block !important;
   }

4. Selanjutnya cari kode <div id='content-wrapper'> pasang kode HTML di bawah ini tepat di atas kode <div id='content-wrapper'> berikut kode nya :

   <div id="menu">
     <ul>
         <li><a href="/">HOME</a>
       </li>
       <li><a href="#">Blogger-Tool</a>
         <ul>
           <li><a href="#">Kompres Css</a></li>
           <li><a href="#">Konversi</a></li>
           <li><a href="#">Css Beauty</a></li>
         </ul>
       </li>
         <li><a href="#" title="Music">Music</a></li>
         <li><a href="#">Template</a>
         <ul>
             <li><a href="#">Responsive</a></li>
           <li><a href="#">Blue Thema</a></li>
           <li><a href="#">Two Colomb</a></li>
         </ul>  
       </li>
     </ul>
   </div>

5. Lakukan Preview jika tidak ada yang error silahkan Save Template

Untuk jenis Menu navigasi yang lain silahkan review ke link berikut.Atau jika sobat ada kesulitan / pertanyaan silahkan ajukan di form komentar Insya Allah akan saya jawab (Sebatas Kemampuan saya)

Judul Artikel :Cara Membuat Menu Horisontal Drop Down Sederhana

Terima Kasih Sobat sudah membaca Artikel saya Tentang Cara Membuat Menu Horisontal Drop Down Sederhana Silahkan tinggalkan jejak lewat form komentar untuk mempermudah Admin berkunjung balik ke blog sobat. Mau share ulang Article saya ini..? silahkan ..!! tentunya dengan Judul dan narasi yang berbeda dan jangan lupa untuk mencantumkan link sumber..Terima Kasih