Cara Memasang Menu Dropdown CSS3

Hallo Sobat DRobani, kali ini saya akan post tentang menu dropdown css3 nih oke biar gak buang2 waktu langsung aja oke ....... ^_^



1. Buka Blogger >> Template >> Edit HTML
2. Masukan CSS di bawah ini di atas code ]]></b:skin>


/* LINK TRANSITION */ a { -moz-transition:color 0.3s ease-out; -webkit-transition:color 0.3s ease-out; -o-transition:color 0.3s ease-out; transition:color 0.3s ease-out; } /* MENU STYLE */ header { width:100%; } header #top { background:#222; float:left; height:30px; line-height:30px; width:100%; } header nav#topmenu { margin:0 auto; padding:0 15px; position:relative; width:960px; } header nav#topmenu ul { margin:0 padding:0; } header nav#topmenu ul li { float:left; position:relative; font-size:10px; list-style:none; margin:0; padding:0; width:90px; text-align:center; text-transform:uppercase; border-right:1px solid #ccc; } header nav#topmenu ul li:first-child { border-left:1px solid #ccc; } header nav#topmenu ul li a { color:rgba(255,255,255,0.6); text-decoration:none; display:block; } header nav#topmenu ul li a:hover { color:#fff; } header nav#topmenu ul li:hover > a { /* ACTIVATE LINK WHEN THE MOUSE OVER SUB-MENU */ color:#fff; } header nav#topmenu ul li span { background:url(arrow.png) center no-repeat; height:10px; position:absolute; text-indent:-9999px; top:10px; right:5px; width:10px; } header nav#topmenu ul li span.arrow { background-position:0 2px; } header nav#topmenu ul li span.arrow-right { background-position:-10px 2px; } header nav#topmenu ul li ul.sublist { /* FIRST SUB-MENU STYLE */ float:left; list-style:none; margin:0; padding:0; position:absolute; left:0px; top:31px; background:#222; width:90px; opacity:0; visibility:hidden; /* Avoids being selected even if the opacity is set to 0 */ /* CSS3 Multiple Transitions */ -moz-transition:opacity 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear; -webkit-transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear; -o-transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear; transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear; } header nav#topmenu ul li ul.sublist li { border:none; border-bottom:1px solid #ccc; clear:both; margin-top:-15px; padding:0; width:90px; -moz-transition:opacity 0.1s 0.15s ease-out, margin 0.3s 0.1s ease-out; -webkit-transition:opacity 0.1s 0.15s ease-out, margin 0.3s 0.1s ease-out; -o-transition:opacity 0.15s 0.15s ease-out, margin 0.3s 0.1s ease-out; transition:opacity 0.15s 0.15s ease-out, margin 0.3s 0.1s ease-out; } header nav#topmenu ul li ul.sublist li a { color:rgba(255,255,255,0); } header nav#topmenu ul li:hover ul.sublist { opacity:1; visibility:visible; } header nav#topmenu ul li:hover ul.sublist li { margin-top:0; opacity:1; } header nav#topmenu ul li:hover ul.sublist li a { color:rgba(255,255,255,0.6); -moz-transition:color 0.1s ease-out; -webkit-transition:color 0.1s ease-out; -o-transition:color 0.1s ease-out; transition:color 0.1s ease-out; } header nav#topmenu ul li:hover ul.sublist li a:hover { color:rgba(255,255,255,1); -moz-transition:color 0.3s ease-out; -webkit-transition:color 0.3s ease-out; -o-transition:color 0.3s ease-out; transition:color 0.3s ease-out; } header nav#topmenu ul li:hover ul.sublist li:hover > a { /* ACTIVATE LINK SUB-MENU WHEN THE MOUSE OVER SUBSUB-MENU */ color:#fff; } /* SUB-MENU SUB STYLE */ header nav#topmenu ul li ul.sublist li ul.subsublist { float:left; list-style:none; margin:0; padding:0; position:absolute; left:61px; top:0px; background:#222; width:90px; opacity:0; visibility:hidden; -moz-transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear; -webkit-transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear; -o-transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear; transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear; } header nav#topmenu ul li ul.sublist li ul.subsublist li{ border:none; border-bottom:1px solid #ccc; clear:both; margin:0; padding:0; width:90px; opacity:1; } header nav#topmenu ul li ul.sublist li:hover ul.subsublist { opacity:1; left:91px; visibility:visible; }

3. Simpan Template
4. Taro Code Dibawah Ini Di bawah Code <body>

<header> <div id="top"> <nav id="topmenu"> <ul><li><a href="">Home</a></li><li><a href="">About</a></li><li><a href="">Portfolio<span class="arrow">More Link</span></a> <ul class="sublist"><li><a href="#">Sub link</a></li><li><a href="#">Sub link</a></li><li><a href="#">Sub link<span class="arrow-right">More Link</span></a> <ul class="subsublist"><li><a href="#">Sub Sub link</a></li><li><a href="#">Sub Sub link</a></li><li><a href="#">Sub Sub link</a></li></ul></li></ul></li><!-- OTHER LINKS SECTION --> </ul></nav> </div></header>

5.Ganti code berikut
-Ganti tanda # dengan Url Anda
-Ganti Sub link Sesuai yg anda inginkan



Semoga Artikel Ini Bermanfaat ^_^