<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<nav id='navigasi'>
    <span id='toggle-dropdown'>Menu<i class="fa fa-bars"></i></span>
    <ul id='nav' class='hidemenu'>
        <li><a href=''>menu 1</a></li>
        <li><span class='subs'>menu 2<i class="fa fa-plus-square"></i><i class="fa fa-minus-square"></i></span>
            <ul>
                <li><a href=''>submenu 1</a></li>
                <li><a href=''>submenu 2</a></li>
            </ul>
        </li>
        <li><a href=''>menu 3</a></li>
        <li><span class='subs'>menu 4<i class="fa fa-plus-square"></i><i class="fa fa-minus-square"></i>
</span>
            <ul>
                <li><a href=''>submenu 1</a></li>
                <li><a href=''>submenu 2</a></li>
            </ul>
        </li>
    </ul>
</nav>
.fa.fa-bars{
    display:none;
}
#navigasi{
    background:#3498db;
    font-family:"Comic Sans MS", cursive, sans-serif;
}
#navigasi ul{
    margin:0;
    padding:0 8px;
    list-style:none;
}
#navigasi ul li{
    display:inline-block;
}
#navigasi li a,
#navigasi li span{
    display:inline-block;
    padding:0 8px;
    text-decoration:none;
    cursor:pointer;
    line-height:40px;
}
#navigasi li a,
#navigasi li span,
#navigasi .fa-plus-square{
    color:black;
}
#navigasi .fa-plus-square,
#navigasi .fa-minus-square{
    margin-left:10px;
}
#navigasi li:hover .fa-plus-square{
    display:none;
}
#navigasi li:hover .fa-minus-square{
    display:inline-block;
}
#navigasi li .fa-minus-square{
    display:none;
}
@media (min-width:481px){
    #toggle-dropdown{display:none}
    #navigasi ul ul{
        display:none;
        padding:0;
        min-width:170px;
    }
    #navigasi ul ul li,
    #navigasi ul ul li a{
        display:block;
    }
    #navigasi ul li:hover ul{
        display:block;
        background:#ecf0f1;
        position:absolute;
    }
    #navigasi li:hover span,
    #navigasi li a:hover,
    #navigasi li span:hover,
    #navigasi li:hover .fa-plus-square{
        background:#2980b9;
    }
}
@media (max-width:480px){
    .showmenu{display:block}
    .hidemenu{display:none}
    #toggle-dropdown,
    #toggle-dropdown .fa.fa-bars{line-height:40px;}
    #toggle-dropdown{display:block;cursor:pointer;padding:0 10px;}
    .fa.fa-bars{display:inline-block;float:right;}
    #navigasi{height:30%;overflow:auto;padding-bottom:4px}
    #navigasi li a,#navigasi li span{border-bottom:1px dotted;}
    #navigasi li a,
    #navigasi li span,
    #navigasi ul li{display:block;cursor:pointer;}
    #navigasi ul ul{display:block;padding:0 0 0 10px;}
    #navigasi li{position:relative}
    #navigasi .fa-plus-square,
    #navigasi .fa-minus-square{
        position:absolute;
        right:0;
        line-height:40px;
    }
    #navigasi li:hover span,
    #navigasi li a:hover,
    #navigasi li span:hover,
    #navigasi li:hover .fa-plus-square{
        color:white;
    }

}
document.getElementById('toggle-dropdown').addEventListener('click', toggleOpenMenu);
function toggleOpenMenu(){
    document.querySelector('#navigasi ul').className = "showmenu";
    document.querySelector('#toggle-dropdown').style.color = "white";
    document.getElementById('toggle-dropdown').removeEventListener('click', toggleOpenMenu);
    document.getElementById('toggle-dropdown').addEventListener('click', toggleCloseMenu);
}
function toggleCloseMenu(){
    document.querySelector('#navigasi ul').className = "hidemenu";
    document.querySelector('#toggle-dropdown').style.color = "black";
    document.getElementById('toggle-dropdown').removeEventListener('click', toggleCloseMenu);
    document.getElementById('toggle-dropdown').addEventListener('click', toggleOpenMenu);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.