Membuat Dropdown Menu Menarik Dengan Menggunakan CSS

Pada tutorial kali ini anda akan belajar bagaimana membuat dropdown menu menarik dengan menggunakan css.

Hallo semuanya kali ini saya akan membahas tentang drop down menu bagaimana membuat dropdown menu menarik dengan menggunakan css,  menarik di sini adalah saat kita hover menu tersebut maka sub menu selanjutnya akan muncul dengan cara yang sangant lembut atau smooth 🙂

lalu bagaimana cara membuatnya ?  so check this out

pertama tama kita harus membuat struktur HTMLnya terlebih dahulu :

<html>
  <head>
    <title>Smooth drop down menu</title>
  </head>
  <body>
    <menu>
        <ul class="primary">
          <li><a href="#">home</a></li>
          <li><a href="#">galery</a>
            <ul class="sub1">
              <li><a href="#">sub 1</a></li>
              <li><a href="#">sub 1</a></li>
              <li><a href="#">sub 1</a></li>
            </ul>
          </li>
          <li><a href="#">contact us</a></li>
          <li><a href="#">about</a></li>
       </ul>
    </menu>
  </body>
</html>

setelah kita salin HTML nya , maka langkah selanjutnya baru kita percantik dengan CSS, dan berikut adalah CSSnya :

	menu{
  width:600px;
  background:deeppink;
  margin:auto;
  height:50px;
}

.primary li {
  
  float:left;
  list-style:none;
  width:25%;
  line-height:50px;
  position: relative;
}
.primary li a{
  text-decoration:none;
  color:#fff;
}





.sub1{
    background: #3399FF;
    width: 130px;
    padding-left: 0px;
    opacity: 0;
    position: absolute;
    left: -28px;

}

.sub1 li {
	width: 100%;
	text-align: center;
	height: 0px;
}

.sub1 li a {
	color: #fff
}

.primary li:hover .sub1{
	opacity: 1;
}

menu ul li:hover ul li {
	height:25px;
	line-height: 25px
}


.sub1 {
	transition:all 1s;
}
.sub1 li {
	transition:height 0.5s;
}

oke setelah semuanya di salin coba kalian pahami terlebih dahulu struktur HTML dan CSS nya agar kalian paham dan bisa mengembangkanya lebih baik lagi.

dan hasilnya akan seperti demo di bawah ini :

DEMO

oke teman-teman itulah tadi tutorial singkat namun berguna bagi kalian yang ingin membuat menu dropdown cantik tentangbagaimana membuat dropdown menu menarik dengan menggunakan css.