Membuat Menu Ddop Down ~ TIPS DAN ILMU

Pada Turorial kali ini saya akan membahas tentang menu navigasi
jika anda belum tau apa itu menu navigasi coba anda lihat bagian atas blog ini dan terdapat beberapa menu dan itulah yang disebut menu navigasi
langsung saja ke cara pembuatan
cari kode ]]></b:skin>
gunakan ctrl+f untuk mempercepat pencarian
kemudian paste kode berikut tepat diatas kode ]]></b:skin>

#catmenucontainer{
height:33px;
width:1000px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-44VxjlYd8ughyphenhyphenYcLnThbtG_QQBMB8W5Lpk4KR5ph6Tm-y2d7fS49VHoc1b020x6uy0MRUs6ESwxHmIxeUAOUHmzU1AJ_mDeHDCsya_px82R1yzS7r0xeeFsx3oiPSIK4yXh2JKN_ou4z/) repeat-x;
display:block;
padding:0px 0 0px 0px;
font-size:12px;
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
font-weight:normal;
border-top:1px solid #252424;
}

#catmenu{
margin: 0px;
padding: 0px;
width:1000px;
background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-44VxjlYd8ughyphenhyphenYcLnThbtG_QQBMB8W5Lpk4KR5ph6Tm-y2d7fS49VHoc1b020x6uy0MRUs6ESwxHmIxeUAOUHmzU1AJ_mDeHDCsya_px82R1yzS7r0xeeFsx3oiPSIK4yXh2JKN_ou4z/) repeat-x;
height:33px;
}

#catmenu ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#catmenu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#catmenu li a, #catmenu li a:link, #catmenu li a:visited {
color: #fae7df;
display: block;
margin: 0px;
padding: 9px 10px 10px 10px;
}

#catmenu li a:hover, #catmenu li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja-eIcQaaBbLjNlGgZWrHcYSAteBBRTuBb8nbWjU4sCjUFUxj2z_Tf9imMOea3ZJvvXxdWdjhjOuW4c-gsctUdEsrj3B-cYuXIzGwQBT_WfOqTZJuFUoqE5L5nxZsB6ASuyOIjcZp0RDra/) repeat-x;
color: #fff;
margin: 0px;
padding: 9px 10px 10px 10px;
text-decoration: none;
}

#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background:#ED4A05;
width: 150px;
color: #fae7df;
font-family:Tahoma,century gothic,Georgia, sans-serif;
font-weight: normal;
float: none;
margin: 0px;
padding: 9px 10px 10px 10px;
border-bottom: 1px solid #FF7800;

}

#catmenu li li a:hover, #catmenu li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja-eIcQaaBbLjNlGgZWrHcYSAteBBRTuBb8nbWjU4sCjUFUxj2z_Tf9imMOea3ZJvvXxdWdjhjOuW4c-gsctUdEsrj3B-cYuXIzGwQBT_WfOqTZJuFUoqE5L5nxZsB6ASuyOIjcZp0RDra/) repeat-x;
color: #fff;
padding: 9px 10px 10px 10px;
}

#catmenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}

#catmenu li li {
}

#catmenu li ul a {
width: 140px;
}

#catmenu li ul a:hover, #catmenu li ul a:active {
}

#catmenu li ul ul {
margin: -34px 0 0 170px;
}

#catmenu li:hover ul ul, #catmenu li:hover ul ul ul,
#catmenu li.sfhover ul ul, #catmenu li.sfhover ul ul ul {
left: -999em;
}

#catmenu li:hover ul, #catmenu li li:hover ul,
#catmenu li li li:hover ul, #catmenu li.sfhover ul,
#catmenu li li.sfhover ul, #catmenu li li li.sfhover ul {
left: auto;
}

#catmenu li:hover, #catmenu li.sfhover {
position: static;
}

Setelah itu copy kode dibawah ini dan paste tepat dibawah kode <div id="content-wrapper">

jika anda ingin membutnya dibawah header atau diatas <div id="content-wrapper">

"semoga bermanfaat"

sumber

TIPS DAN ILMU

Categories

Blog Archive

Pages

About Me

Sunday, December 4, 2011