Cara Membuat Menu Dropdown di blog menggunakan Jquery dan CSS

Sebelum saya sudah memberikan tutorial tentang Cara Membuat Menu html dan css di blog, dan pada hari ini saya akan memberikan tutorial Cara Membuat Menu Dropdown di blog menggunakan Jquery dan Css... menu adalah bagian yang sangat penting dalam sebuah Website/Blog, agar dapat memudahkan pengunjung dalam menjelajahi website/blog sobat, pasti sobat blogger inginkan kalo blognya di lengkapi dengan menu yang sangat menarik.... pada tutorial ini kita akan mencoba membuat Menu Dropdown di blog menggunakan CSS, dan kita akan mempercantik menu Dropdown dengan bantuan Jquery. sebenarnya tanpa bantuan Jquery menu ini dapat berjalan dengan baik, namun untuk membuat sedikit efek animate kita menggunakan Jquery.

Langkah-langkah:

 1. Buka blog ----->blogger.com
 2. pilih template dan klik edit Html, setelah itu cari kode
 3. dan copy kode CSS dibawah ini, tepat di atas kode

     .content{
height: 200px;
}

#nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:1.5em;
}

#nav a{
display:block;
padding:5px 5px;
border:1px solid #008bce;
color:#fff;
text-decoration:none;
background-color:#008bce;
}

#nav a:hover{
background-color:#0084c8;
color:#fff;
}

#nav li{
float:left;
position:relative;
}

#nav ul {
position:absolute;
display:none;
width:12em;
top:2.3em;
}

#nav li ul a{
width:12em;
height:auto;
float:left;
}

#nav ul ul{
top:auto;
}

#nav li ul ul {
left:12em;
margin:0px 0 0 10px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}

 4. nah.. setelah itu cari kode  dan copy kode Html di bawah ini, tepat di bawah kode

    <div class='content'>
<nav>
<ul id='nav'>
              <li><a href='http://valerian-17.blogspot.com'>HOME</a></li>
   <li><a href='#'>ABOUT</a></li>
   <li><a href='#'>TUTORIAL</a>
     <ul>
           <li><a href='#'>A</a>
             <ul>
                   <li><a href='#'>B</a></li>
                   <li><a href='#'>C</a>
<ul>
<li><a href='#'>D</a></li>
<li><a href='#'>E</a>
<ul>
<li><a href='#'>F</a></li>
<li><a href='#'>G</a></li>
<li><a href='#'>H</a></li>
</ul>
</li>
<li><a href='#'>I</a></li>
</ul>
</li>
             </ul>
           </li>
           <li><a href='#'>J</a></li>
           <li><a href='#'>K</a></li>
     </ul>
   </li>
</ul>
</nav>
</div>

 5. selanjutnya sobat cari kode
 6. agar menu mempunyai efek animate kita akan tambahkan kode Jquery di bawah ini... copy kode Jquery tepat di atas kode

<script src='https://googledrive.com/host/0B7NwtyofXuK5cUp2MjcxTWVwN3c/jquery-1.8.3.min.js' type='text/javascript'/>
<script type='text/javascript'>
function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});
}



 $(document).ready(function(){
mainmenu();
});
</script>

Demo: http://demo-menu-dropdown.blogspot.com/

Note: Jika Anda Kebingunggan Mengikuti Langkah-langkah di atas, Berikan komentar anda yang logis !!!