Muke Gile

Oke langsung saja ke Cara Memodifikasi / Membuat Navbar Menu Bertingkat ke-2

• Masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Template - Edit HTML - Lanjutkan
• Kalau kawan mempergunakan Navbar Menu [atau apalah namanya silahkan di Copas dulu untuk jaga-jaga] atau kalau tidak ada Navbar Menu pada Blog kawan, Copas Kode Css berikut persis diatas ]]></b:skin> 

#NavbarMenu {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv6DJ_P8lG_ekFfbYN-RgzKvTvwkkSA5U6_dZ2cvPF98GNO9YOCENZUHaVi6i3HUfkm0_Xsvj6G_38LSGlWMEJddsDN6yGhZWc3tO2Pn4F5b9dvgLpLihFbS4a5dDy4gKAqogCGJ3P9ZWB/s1600/menu_bg.png); no-repeat top center;
width: 100%;
height: 40px;
 color: $navcolor;
 margin: 0 auto 0;
 padding: 5px 30px;
 font: bold 12px Arial, Tahoma, Verdana;
 border: 0px solid #699AB8
 }
#nav {
width: 95%; float: left;
 margin: 0;
 padding: 0;
}
#nav ul {
 float: left;
 list-style: none;
 margin: 0;
 padding: 0;
}
#nav li {
 list-style: none;
 margin: 0;
 padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
 color: $navcolor;
 display: block;
height: 20px;
 text-transform: uppercase;
 margin-top: 2px;
 padding: 7px 15px;
 font: bold 13px Tahoma, Georgia, Times New Roman;
 background: transparent;
}
#nav li a:hover, #nav li a:active {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxGs-KUmI9AfjUs1Y4ttuR7crpDgCf5AHSFe3IWVvwMdAfcO0372FlgzHaUqfKzMHcPNw1JPbmWUP-a25xaZ0iIqKuqzRtvPRbiSssTS5AInxX6w3OQwk20-Lp2EN-pxoa-wD3pxUQi2qS/s1600/selected.png); repeat-x center center;
border: 1px 1px 0 1px;
color: #FFF;
text-shadow: 1px 1px 1px #F00;
text-decoration: none;
margin-top: 2px;
padding: 7px 15px ;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGZ3iYmW4D0fpuhSJBub3GM1pJjpSGDpbzaQnNT3MfrGlTyRCGJNkB-wGkQFMwvxId8W7l9p7qSdu5f3Gc6EmnfDOMI0_hcIAreoyCu5t0RwCTJOyMu7prCXl0_0xN6OsJkZAUudUZrtBl/s1600/submenu.png); repeat-y left bottom;
width: 150px;
height: auto;
color: #000;
text-transform: uppercase;
float: none;
margin : 0;
position: relative;
padding: 7px 20px;
font: normal 13px Tahoma, Georgia, Times New Roman;
}
#nav li li a:hover, #nav li li a:active {
background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitsrA92VFhSB_3SJhHswXqhGivRd__nmlyKg9iemcqMScxlY9QHmyJ9mkBYgPMvzROMoJJmoag0Bo6lWxMb9SP3gQy5E8RahtwnHYVMKTxEG3ewFwit3Kg1UaqD6pGLa0HHmI6x5dlkVxu/s1600/submenuhover.png); no-repeat center top;
border: 0px solid #ccc;
color: #FFF;
text-shadow: 1px 1px 1px #F00;
text-decoration: none;
margin: 0;
padding: 7px 20px;
font-size: 13px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 140px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -30px 0 0 190px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}