Membuat Menu Jungle dengan CSS

Dengan hadirnya CSS begitu banyak kreasi yang bisa kita lakukan untuk memodifikasi tampilan sebuah web/blog agar lebih menarik. kali ini ane akan mencoba sebuah Tutorial tentang bagaimana cara membuat Menu Jungle dengan CSS tentunya, yang kurang lebih freview gambarnya seperti dibaha ini :

VIEW A DEMO

Adapun cara penerapannya sebagai berikut :

1. Seperti biasa Login dulu ke akun Blogger sobat

2. Kemudian klik "TEMPLATE" Klik "Edit HTML"

3. Jangan Lupa Cetang "Expand Template Widget"

4. Cari Kode ]]></b:skin> Gunakan Ctrl+F untuk mempercepat pencarian

5. Kopi Paste Kode CSS Dibawah ini Tepat diatas kode ]]></b:skin>

#menu2{
width:90%;
margin:25px auto;
}
#menu2 ul{
list-style:none;
}
#menu2 li{
display:block;
float:left;
}
#menu2 li a{
background:#979797 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgngwzkPXde373_2jsffSKzE4WAS4ZoP2y7MM3jP-GJVhxCKuUz64DTK4hZVyA5MpNhbRyk3dQVhv374NWdOYMrj1YFsu44Y7UtPAH1YvqaV4TG9x-Vt5dzMd2sQy7q9Aax9YsEHFbK7tTZ/s1600/menu_bg.gif) repeat-x;
border:2px solid #939393;
margin:0 1px;
padding:15px 15px 15px 15px;
display:block;
float:left;
color:#fff;
text-transform:uppercase;
text-decoration:none;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
height: 50px;
}
#menu2 li a span{
color:#636363;
font-size:10px;
text-transform:lowercase;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-weight:normal;
}
#menu2 li a:hover{
background:#e46825 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYjosxFzv_nF1_klcdh3KvZu0b-L1kaFcDtoLJPI31VdYrt0QAU93CKfLjhsNwKowbDNDnoL8F3t1KUiDBZ1wyp6EEr6eNtHAk5qh1G3r9d1ugLZb53BCYMk0V5YZJZd9hPIHEA3Hiv84W/s1600/menu_hover.gif) repeat-x;
border:2px solid #939393;
text-decoration:none;
}
#menu2 li a:hover span{
color:#636363;
}
.current{
background:#bcbcbc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYjosxFzv_nF1_klcdh3KvZu0b-L1kaFcDtoLJPI31VdYrt0QAU93CKfLjhsNwKowbDNDnoL8F3t1KUiDBZ1wyp6EEr6eNtHAk5qh1G3r9d1ugLZb53BCYMk0V5YZJZd9hPIHEA3Hiv84W/s1600/menu_hover.gif) repeat-x;
border:2px solid #aeaeae;
margin:0 1px;
padding:15px 15px 15px 15px;
display:block;
float:left;
color:#fff;
text-transform:uppercase;
text-decoration:none;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:13px;
cursor:pointer;
font-weight:bold;

height: 50px;
}
.current span{
color:#636363;
font-size:10px;
text-transform:lowercase;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-weight:normal;
}

6. Save Template
7. Kemudian Kopi paste Kode HTML dibawah ini, Caranya ;
1. Klik Tata Letak
2. Klik Add Widget
3. Klik HTML/Java Scrift dan taruh Kode dibawah ini :

<div id="menu2">
<ul>
<li class="current">Home takes you to home page</li>
<li><a href="#">About Us takes you to about us page</a></li>
<li><a href="#">Products takes you to products page</a></li>
<li><a href="#">Partners takes you to partners page</a></li>
<li><a href="#">Contact Us takes you to contact page</a></li></ul>
</div><!--MenuBar Ends--

8. Klik Save, dan lihat hasilnya. and enjoy.............