coba

< Script type = "text / javascript" { / / Kami awalnya menyembunyikan semua dropdown menu $ ( '# dropdown_nav li ') . menemukan ( ' . sub_nav ') . menyembunyikan ( ); / / Bila melayang di atas utama nav link yang kami menemukan menu dropdown untuk link yang sesuai. $ ( '# dropdown_nav li ') . membawa ( function ( ) { / / Cari anak 'ini' dengan kelas. sub_nav dan membuat keindahan fadeIn . $ ( ini) . menemukan ( ' . sub_nav ') . fadeIn ( 100); } , fungsi ( ) { / / Lakukan hal yang sama lagi, hanya fadeOut saat ini. $ ( ini) . menemukan ( ' . sub_nav ') . fadeOut ( 50); } ); } ); < gaya > # dropdown_nav a { font yang -family : Arial, Sans-Serif, Font -size : 15px; huruf -weight : bold; warna : # 525252; text -decoration : none; } # dropdown_nav { width : 960px; bantalan : 0px; display : inline-block; daftar -style : none; -moz-box-shadow: 0px 0px 1px inset # fff; -webkit-box-shadow: 0px 0px 1px inset # fff; border : 1px solid # E2e2e2), background : -webkit-gradien ( linear, 0 0, 0 100%, dari ( # f3f3f3), untuk ( # e2e2e2)); } # dropdown_nav li { padding: 10px 0px 10px 0px; mengapung : left; posisi : relative; display : inline-block; } # dropdown_nav li a { padding: 10px 15px 10px 15px; text -shadow : 1px 1px-0px # f6f6f6; -moz-box-shadow: 0px 0px 1px inset # fff; -webkit- box-shadow: 0px 0px 1px inset # fff; perbatasan -kanan : 1px solid # ccc; } # dropdown_nav li a : hover { background : # f9f9f9; background : -moz-linear-gradien ( # f9f9f9, # e8e8e8); latar belakang : -webkit-gradien ( linear, 0 0, 0 100%, dari ( # f9f9f9), untuk ( # e8e8e8)); } # dropdown_nav li a : active { background : # e2e2e2; background : -moz-linear-gradien ( # e2e2e2, # f3f3f3), background : -webkit-gradien ( linear, 0 0, 0 100%, dari ( # e2e2e2), untuk ( # f3f3f3)); } # dropdown_nav li . yang pertama { - moz -border-radius : 5px 0px 0px 5px; - webkit -border-radius : 5px 0px 0px 5px; } / * # dropdown_nav li a. terakhir { - moz -border-radius : 0px 5px 5px 0px; - webkit -border-radius : 0px 5px 5px 0px; } * / / * Sub-Nav styling * / . # dropdown_nav sub_nav { width : 160px; bantalan : 0px; posisi : absolut; top : 38px; kiri : 0px; border : 1px solid # ccc; background : # e2e2e2; } # dropdown_nav sub_nav. li { width : 160px; bantalan : 0px; } # dropdown_nav sub_nav. li a { display : block; border -bottom : 1px solid # ccc; background : -moz-linear-gradien ( # f3f3f3, # e2e2e2 ;) background : -webkit-gradien ( linear, 0 0, 0 100%, dari ( # f3f3f3), untuk ( ; # e2e2e2)) } sub_nav # dropdown_nav. li a : hover { background : # f9f9f9; background : -moz -linear-gradien ( # f9f9f9, # e8e8e8), background : -webkit-gradien ( linear, 0 0, 0 100%, dari ( # f9f9f9), untuk ( # e8e8e8)); } . # dropdown_nav sub_nav li a : active { background : # e2e2e2; background : -moz-linear-gradien ( # e2e2e2, # f3f3f3), background : -webkit-gradien ( linear, 0 0, 0 100%, dari ( # e2e2e2), untuk ( # f3f3f3)) ; } < ! - Navigasi Start -> < ul id = "dropdown_nav"> < li > Rumah < / a> < li > Tutorial < ul class = "sub_nav"> < li > Photoshop # 1 < / li > < li > Photoshop # 2 < li > Photoshop # 3 < li > Photoshop # 4 < li > Photoshop # 5 < li > Photoshop # 6 < li > Photoshop # 7 < li > artciles < ul class = "sub_nav"> < li > Pengumuman # 1 < li > Pengumuman # 2 < li > Pengumuman # 3 < li > Pengumuman # 4 < li > Freebies < li > Lainnya Stuff < ul class = "sub_nav"> < li > Stuff Lain # 1 < li > Barang Lainnya # 2 < li > Stuff Lain # 3 < li > Lainnya Stuff # 4