Cara membuat menu dropdown dengan jquery dan css

Pada tutorial sebelunya saya telah berbagi tentang cara membuat cara mebuat header menu respontive. nah pada kesempatan kali ini saya akan berbagi tentang bagaiman cara membuat menu dropdown dengan jquery dan css. untuk itu bagi anda yang senang mengotak atik website mungkin artikel ini bisa membantu anda. Baik langsung saja kita menuju tutorialnya.

pertama buatlah file jquey-nya

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="dropit.js"></script>

<script>
$(document).ready(function() {
    $(\'.menu\').dropit();
});
</script>

kemudian kode htmlnya seperti berikut

<ul class="menu">
    <li>
        <a href="#" class="btn">Class &#9658;</a>
        <ul>
            <li><a href="#">Class 1</a></li>
            <li><a href="#">Class 2</a></li>
            <li><a href="#">Class 3</a></li>
            <li><a href="#">Class 4</a></li>
        </ul>
    </li>
</ul>

dan terakhir code cssnya adalah sebagai berikut

<style>
.menu ul { display: none; }
li { list-style: none; }
a { text-decoration: none; }

.menu ul.dropit-submenu {
background-color: #fff;
border: 1px solid #b2b2b2;
padding: 6px 0;
margin: 3px 0 0 1px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
 border-radius: 3px;
-webkit-box-shadow:
 0px 1px 3px rgba(0,0,0,0.15);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.15);
box-shadow: 0px 1px 3px rgba(0,0,0,0.15); }

.menu ul.dropit-submenu a {
display: block;
font-size: 14px;
line-height: 25px;
color: #7a868e;
padding: 0 18px;
}
.menu ul.dropit-submenu a:hover {
background: #248fc1;
color: #fff;
text-decoration: none; }
</style>

semoga bermanfaat terima kasih