Menu Drop Down pada HTML dengan CSS

Pada kesempatan kali ini, saya akan memberi sedikit informasi tentang bagaimana cara memberi menu Drop Dwon pada HTML dengan menggunakan CSS, bagi kalian yang terbiasa tidak menggunakan CSS mungkin akan terasa sedikit sulit, namun tidak ada salahnya mencoba untuk belajar, baiklah langsung saja salin script - script dibawah ini :

Pertama kita masukkan script di bawah ini kedalam script CSS yang telah kita buat sebelumnya, silahkan salin script di bawah ini :

nav ul ul {
 display: none;
}
 nav ul li:hover > ul {
  display: block;
 }
nav ul {
    background: none;  /*background menu*/
    list-style: none; /*menghilangkan titik pada list*/
    position: relative;
    display: inline-table;
}
 nav ul:after {
  clear: both;
  display: block;
 }

 nav ul li {
  float: left;
 }
  nav ul li:hover {
   background: none; /*mengubah warna saat mouse berada diatasnya*/
  }
   nav ul li:hover a {
    color: #ec7195; /*mengubah warna link saat mouse berada diatasnya*/
   }
 
  nav ul li a {
   display: block;
   padding: 5px 40px; /*pengaturan link */
   color: #ec7195; text-decoration: none;
  }
  
 
 nav ul ul {
  background: none; /*menu dropdown*/
  padding: 0px;
  position: center;
  top: 100%;
 }
  nav ul ul li {
   float: none; /*menampilkan drop down ke bawah*/
  }
   nav ul ul li a {
    padding: 0px;
    color: #fff;
   }
    nav ul ul li a:hover {
     background: none;
    } 

Kedua adalah memasukkan script Drop Downnya pada "Index" kalian masing - masing, salinlah script di bawah ini:

<center>
<div class="navigation">
    <nav>
     <ul>
        <li><a href="Index.html">H O M E</a></li>
       
        <li><a href="kebutuhan.html">K E B U T U H A N</a></li>
    
         <li><a href="#">P A K A I A N</a>
              <ul>
                 <li><a href="baju.html">B A J U</a></li>
                 <li><a href="piyama.html">P I Y A M A</a></li>
                 <li><a href="celana.html">C E L A N A</a></li>
              </ul>
        </li>
        <li><a href="Kontak.html">K O N T A K</a></li>
   
     </ul>
    </nav>
</div>
</center> 

Tampilannya akan seperti ini :

  

Sekian dan semoga bermanfaat