Membuat Menu Horizontal Drop Down dengan CSS

Nah pada bahasan hari ini kita akan membuat menu horizontal drop down dengan Css style, ya walaupun saya sedang menjalani penulisan tugas akhir kuliah tapi tetep urusan ngeblog dan membuat postingan harus bejalan. ya belajar untuk menjadi propesional aja !!! he2x. . Menu horizontal drop down CSS ini sebenarnya sudah banyak diketahui oleh para blogger, khusunya para Master Blogger. Tapi tiada salahnya saya ingin sekali membagi ilmu dan pengalaman yang sedikit ini kepada kawan - kawan sekalian.

1. Masuk ke Halaman Dashboard > Tatat Letak > Edit HTML.
2. Gunakan "Ctrl+F" pada Keyboard Komputer Anda Untuk mencari Kode.
3. Jangan Lupa untuk mebackUp template kesayanagan Anda, Klik 'Download Template Lengkap'.
4. Letatakan kode di bawah ini diatas kode ]]></b:skin>

#foxmenucontainer{
height:33px;
width:1000px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQZ92xx4lpIuaIne-4FKQLrcVI4du0EEKp4YpWC2GVSQQhBhAqWEWdbq1_2NJ-_zgd7BX6a_LGDVTGa39bg87paFdB2YPT8VvIfSvu-cEKNaZV9WsKMvZaLBdETL0aQCxUY3viZNdaXJw-/) repeat-x;
display:block;
padding:0px 0 0px 0px;
font-size: 14px;
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
font-weight:normal;
text-transform:uppercase;
}

#menu{
margin: 0px;
padding: 0px;
width:1000px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQZ92xx4lpIuaIne-4FKQLrcVI4du0EEKp4YpWC2GVSQQhBhAqWEWdbq1_2NJ-_zgd7BX6a_LGDVTGa39bg87paFdB2YPT8VvIfSvu-cEKNaZV9WsKMvZaLBdETL0aQCxUY3viZNdaXJw-/) repeat-x;
height:33px;
}

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

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

#menu li a, #menu li a:link, #menu li a:visited {
color: #747474;
display: block;
margin: 0px;
padding: 10px 15px 9px 15px;
}

#menu li a:hover, #menu li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaR11fifoLMLV5MbWn9wlQuPYso5exSwHsxj5N7jT2m7W9isztQJkMJl_zClv4Sh6G-CqG2vDeMG1QuuiSzhb3HDE7XqIvTElau4qUK4HjoYPW7kc-_7-Q9VlT2xojV46eLiJviJyxOBh6/) repeat-x;
color: #fff;
margin: 0px;
padding: 10px 15px 9px 15px;
text-decoration: none;
}

#menu li li a, #menu li li a:link, #menu li li a:visited {
background:#202020;
width: 150px;
color: #bbb;
font-size: 13px;
font-family: tahoma, century gothic,Georgia, sans-serif;
font-weight: normal;
float: none;
margin: 0px;
padding: 8px 10px 7px 10px;
border-bottom: 1px solid #282828;
}

#menu li li a:hover, #menu li li a:active {
background: #121212 ;
color: #fff;
padding: 8px 10px 7px 10px;
}

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

#menu li li {
}

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

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

#menu li ul ul {
margin: -32px 0 0 170px;
}

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

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

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


5. Setelah itu masukan kode dibawah ini, diatas kode <div id='header-wrapper'> apabila Anda ingin menaruhnya diatas header blog dan apabila ingin meletakan-Nya di bawah Header blog pastekan saja di bawah kode <div id='header-wrapper'>.

   <div id='foxmenucontainer'>
   <div id='menu'>
   <ul>
   <li><a href='LINK ALAMAT BLOG ANDA'>Home</a></li>
   <li><a href='LINK TUJUAN'>NAMA MENU </a>
   <ul>
   <li><a href='SUB LINK TUJUAN'>NAMA MENU-1</a></li>
   <li><a href='#'>Link-1-2</a>
   <ul>
   <li><a href='#'>Link-1-2-a</a></li>
   <li><a href='#'>Link-1-1-b</a></li>
   </ul>
   </li>
   <li><a href='#'>Link-1-3</a></li>
   </ul>
   </li>
   <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2</a></li>
   <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3</a></li>
   <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-4</a></li>
   <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5</a></li>
   <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-6</a></li>
   <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-7</a></li>
   <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-8</a></li>
   </ul>
   </div>
   </div>
   <div class='clear'/>
   

6. Simpan Template dan lihatlah Hasilnya.

Keterangan : Gantilah Alamat Link / Tulisan yang bercetak tebal dan Nama Menu dangan selera Anda.