✔ Cara Menciptakan Hidangan Droup Down Dengan Css

Cara Membuat Menu Droup Down Dengan CSS Kali ini akan Mencoba Membuat Menu Droup Down Dengan CSS, Siapa tau sobat lagi muter muter bersama Om 

Google dan lagi mencari tampilan sajian yang sesuai dengan tema blog itu sendiri. Menu ini sangat gampang Asal ngerti cara memasang nya. Silahkan simak saja caranya dibawah ini 

1. Masuk ke account blogger
2. Untuk menciptakan caranya gampang tinggal pilih Rancangan >> Edit HTML
3. Lalu cari kode ]]></b:skin> dan copykan isyarat CSS dibawah ini diatas nya.

nav{font:bold 16px Calibri,Arial,Sans-Serif}
nav *{margin:0 0 0 0; padding:0 0 0 0; list-style:none}
nav ul{background:#0A8603; background:-webkit-linear-gradient(top,#0A8603,#1F6A1C); background:-moz-linear-gradient(top,#0A8603,#1F6A1C); background:-ms-linear-gradient(top,#0A8603,#1F6A1C); background:-o-linear-gradient(top,#0A8603,#1F6A1C); background:linear-gradient(top,#0A8603,#1F6A1C); height:40px; -webkit-box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4),inset 0px 2px 0px rgba(255,255,255,0.2),0px 1px 3px rgba(0,0,0,0.4); -moz-box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4),inset 0px 2px 0px rgba(255,255,255,0.2),0px 1px 3px rgba(0,0,0,0.4); box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4),inset 0px 2px 0px rgba(255,255,255,0.2),0px 1px 3px rgba(0,0,0,0.4)}
nav li{float:left; display:inline}
nav li a{padding:0px 15px; line-height:40px; color:#111; text-shadow:0px 1px 0px rgba(255,255,255,0.3); display:block; text-decoration:none; -webkit-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1),inset -1px 0px 0px rgba(0,0,0,0.1); -moz-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1),inset -1px 0px 0px rgba(0,0,0,0.1); box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1),inset -1px 0px 0px rgba(0,0,0,0.1)}
nav li a:hover{background:rgba(0,0,0,0.1)}
nav li a:active{background:#0A8603; background:-webkit-linear-gradient(bottom,#0A8603,#1F6A1C); background:-moz-linear-gradient(bottom,#0A8603,#1F6A1C); background:-ms-linear-gradient(bottom,#0A8603,#1F6A1C); background:-o-linear-gradient(bottom,#0A8603,#1F6A1C); background:linear-gradient(bottom,#0A8603,#1F6A1C)}
nav li ul{display:block; width:170px; position:absolute; left:auto; z-index:10; height:auto; visibility:hidden; opacity:0; -webkit-transition:all 0.26s ease-out 0.2s; -moz-transition:all 0.26s ease-out 0.2s; -ms-transition:all 0.26s ease-out 0.2s; -o-transition:all 0.26s ease-out 0.2s; transition:all 0.26s ease-out 0.2s}
nav li li{display:block; float:none; width:100%}
nav li:hover &amp;amp;amp;amp;gt;ul{visibility:visible; width:200px; opacity:1}
nav li li ul{left:200px; margin-top:-40px}
nav li.sub &amp;amp;amp;amp;gt;a{position:relative; padding-right:30px}

4. Lalu Klik Pratinjau Kalau sudah tidak ada dilema lagi Tinggal Simpan Tempelats
5. Buka Tata Letak kemudian Tambah Gadget Pilih HTML JAVAScript  dan masukan Scrip dibawah ini

<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Profil</a></li>
<li class="sub"><a href="#">Jurnal</a>
<ul>
<li><a href="#">2000</a></li>
<li><a href="#">2001</a></li>
<li class="sub"><a href="#">2002</a>
<ul>
<li><a href="#">21 April</a></li>
<li><a href="#">22 April</a></li>
<li class="sub"><a href="#">23 April</a>
<ul>
<li><a href="#">Senin</a></li>
<li><a href="#">Selasa</a></li>
<li><a href="#">Rabu</a></li>
<li><a href="#">Kamis</a></li>
</ul>
</li>
<li><a href="#">24 April</a></li>
<li><a href="#">25 April</a></li>
</ul>
</li>
<li><a href="#">2003</a></li>
<li><a href="#">2004</a></li>
</ul>
</li>
<li><a href="#">Komentar</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</nav>

NB: Bisa juga dipasang  code ini di antara header dan conten-wrapper atau di taruh di bawah header,atau </head> ya sesuakain saja di mana harusnya ini di letakan..Sekian Semoga bermanfaat

Bagikan Artikel ini