Ini adalah tutorial tentang cara membuat Drop down menu CSS murni tanpa menggunakan javascript. Namun saya perhatikan, bahwa orang sering menggunakan JavaScript untuk mencapai efek ini. Sebenarnya, ada cara sederhana untuk melakukannya hanya dengan CSS.

Berikut adalah contoh

Langkah pertama: kita membuat struktur HTML dasar.

  > <Div id = "header">
 <h1> Developer's Paradise demo </ h1>
 > <Ul id = "menu">
 <li> <span> Home </ span>
 <ul>
 > Menu item 1 </a> </li> <li> <a href = "#"> Menu item 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href = "#"> Menu item 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href = "#"> Menu item 3 </ a> </ li>
 </ Ul>
 </ Li>
 <li> <span> Tentang Kami </ span>
 <ul>
 > Menu item 1 </a> </li> <li> <a href = "#"> Menu item 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href = "#"> Menu item 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href = "#"> Menu item 3 </ a> </ li>
 </ Ul>
 </ Li>
 <li> <span> Produk </ span>
 <ul>
 > Menu item 1 </a> </li> <li> <a href = "#"> Menu item 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href = "#"> Menu item 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href = "#"> Menu item 3 </ a> </ li>
 </ Ul>
 </ Li>
 </ Ul>
 </ Div> 

Langkah kedua: sekarang kita membuat kode CSS sihir

  ; padding : 0 ; } * {Margin: 0; padding: 0;}

 body {
 ; background: # 222;
 Arial, Helvetica, sans-serif ; font: 100% normal Arial, Helvetica, sans-serif;
 }

 : #fff ; } h1 {color: # fff;}

 # Header {
 ; height: 120px; position: relative;
 ; background: # 333;
 }

 # Menu {
 margin: 0px;
 padding: 0px;
 position: absolut;
 ; top: 70px;
 display: block;
 }

 # Menu> li {
 list-style-type: none;
 float: kiri;
 display: block;
 ; margin: 0px 10px;
 position: relative;
 padding: 10px;
 width: 100px;
 }

 ul { # Menu> li: hover ul {
 display: block;
 }

 { # Menu> li: hover {
 ; background-color: # 808080;
 -Moz-border-radius: 10px;
 -Webkit-border-radius: 10px;
 }

 # Menu ul li {
 margin: 0px;
 padding: 0px;
 display: none;
 }
 # Menu li ul li {
 list-style-type: none;
 ; margin: 10px 0 0 0;
 font-size: 11px;
 }

 # Menu li ul li {
 display: block;
 ; padding: 10px 5px;
 ; color: # fff;
 text-decoration: none;
 font-weight: bold;
 }

 a { # Menu li ul li: hover a {
 ; background-color: # 606060;
 -Moz-border-radius: 5px;
 -Webkit-border-radius: 5px;
 }

 # Menu li a {
 cursor: pointer;
 ; margin: 0px 10px;
 font-weight: bold;
 ; font-size : 11px ; color: # fff; font-size: 11px;
 } 

Perlu diketahui bahwa kode ini tidak bekerja di IE6 (ini browser miskin hanya tidak tahu apa artinya ul li>).

Saya akan berterima kasih jika Anda bisa mengambil kedua untuk membantu mempromosikan blog saya dan berbagi link dengan salah satu situs favorit Anda jaringan menggunakan link di bawah ini. Berikut ini adalah link ke situs pilihan kami jika Anda ingin mendaftarkan nama Domain .

Filed under: Css , Tutorial oleh admin