Buat Menu Dropdown (Menu Navigasi) Dengan HTML Dan CSS

tipstrik.tk-Hai Sobat Blogger Kali ini saya akan membagikan cara membuat menu dropdown dengan bantuan HTML dan CSS

Baca Juga Tutorial Web Design

Apa Itu Dropdown ?

Sebelum Membahas Code Html dan Css untuk membuat dropdown Sebelumnya kalian juga harus tau dulu apa itu dropdown?
Dropdown adalah elemen GUI (Graphical User Interface) yang kegunaannya mirip dengan list box. Drop-down atau drop-down list menyediakan pilihan bagi para penggunanya dengan cara melakukan klik atau hanya dengan mengarahkan kursor pada pilihan dari sebuah daftar yang disediakan.
Contoh nya Seperti Ini

Yang disebut dropdown adalah yang di tanda panah Merah ketika kita mengklik atau mengarahkan kursor di atas teks tips trik maka akan muncul list pilihan. Selain Menggunakan Javascript Menu Dropdown Juga Dapat Di Buat Menggunakan HTML Dan Css dan kali ini yang akan dibahas Penggunaan HTML Dan CSS Dalam Membuat Menu Dropdown.

Tutorial Pembuatan Menu Dropdown Web Design

1.Buka Text Editor Kalian
2.Buat File Baru Lalu Copy Code Berikut Ke Text Editor Kalian

3. Lalu Save Dengan Nama Index.html
4.Buat Kembali File Baru Lalu Copy Code CSS Berikut ke Text Editor

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
 margin: 0; padding: 0; border: 0;
}

body {
 background: #fff;
 font-family: Helvetica, sans-serif; font-size: 18px; line-height: 24px;
}

nav {
 margin: 100px auto; 
 text-align: center;
}

nav ul ul {
 display: none;
}

nav ul li:hover > ul {
  display: block;
 }

nav ul {
 background: #53bd84; 
 padding: 0 20px;
 border-radius: 10px;  
 list-style: none;
 position: relative;
 display: inline-table;
}
 nav ul:after {
  content: ""; clear: both; display: block;
 }

nav ul li {
  float: left;
 }
  nav ul li:hover {
   background: #666;
  }
   nav ul li:hover a {
    color: #fff;
   }
  
  nav ul li a {
   display: block; padding: 25px 40px;
   color: #fff; text-decoration: none;
  }
   
  
 nav ul ul {
  background: #53bd84; border-radius: 0px; padding: 0;
  position: absolute; top: 100%;
 }
  nav ul ul li {
   float: none; 
   border-top: 1px solid #53bd84;
   border-bottom: 1px solid #53bd84; position: relative;
  }
   nav ul ul li a {
    padding: 15px 40px;
    color: #fff;
   } 
    nav ul ul li a:hover {
     background: #666;
    }
  
 nav ul ul ul {
  position: absolute; left: 100%; top:0;
 }

5.Save
6.Buka File Index.html di Web Browser anda

Itu Saja Cara Pembuatan menu dropdown dengan html dan css
Semoga Postingan Diatas Bermanfaat,Terimakasih.