Penggunaan CSS pada Sub Menu

Penggunaan $(this).attr('id', ''); adalah untuk pengkondisian display dari sub menu apakah diperlihatkan atau tidak. Dengan mengkondisikan nilai "open" pada ID maka sub menu akan diperlihatkan, sebaliknya jika kosong sub menu akan disembunyikan.
$(document).mouseup(function() berguna untuk menyembunyikan Sub Menu

<script type="text/javascript" >
$(document).ready(function(){
    $(".main-menu").click(function(){
        var val=$(this).attr('id');

        if(val=="open"){
            $(".menu").hide();
            $(this).attr('id', ''); 
        }else{
            $(".menu").show();
            $(this).attr('id', 'open');
        } 
    });

    //Mouseup untuk area text di buat false
    $(".menu").mouseup(function(){
        return false
    });
    $(".main-menu").mouseup(function(){
        return false
    });
    
    $(document).mouseup(function(){
        $(".menu").hide();
        $(".main-menu").attr('id', '');
    });

});

</script>

Penggunaan CSS

Kode CSS yang akan digunakan adalah sebagai berikut:

div.navigation {
 color: #555;
 margin: 3px -22px 0 0;
 width: 143px;
 position: relative;
 height: 17px;
 text-align:left;
}
div.menu{
 background: #fff;
 border-radius: 6px;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
 position: absolute;
 display: none;
 top: -12px;
 left: -20px;
 z-index: 100;
 width: 135px;
 margin-left: 10px;
 padding: 40px 0 5px;
}
.navigation  ul {
 list-style:none;
 margin:0px;
 padding:0px;
 font-size: 14px;
 padding: 11px 0 0 0px;
 border-top:1px solid #dedede;
}

.navigation ul li a {
 color: #555555;
 display: block;
 font-family: arial;
 padding: 6px 15px;
 cursor: pointer;
 text-decoration:none;
}

.navigation ul li a:hover{
    background:#6fa609;
    color: #FFFFFF;
 font-weight: bold;
 padding:6px 20px;
}
a.main-menu {
 font-size: 14px;
 line-height: 16px;
 color: #555;
 position: absolute;
 z-index: 110;
 display: block;
 padding: 11px 0 0 15px;
 height: 28px;
 width: 126px;
 margin: -11px 0 0 -10px;
 text-decoration: none;
 background: url(icons/arrow.png) 116px 17px no-repeat;
 cursor:pointer;
}

Download Script :




Demikian penjelasan mengenai pembuatan level dasar drop down menu yang sangat sederhana, semoga bermanfaat

ADS HERE !!!