simple menu.html

<script>
$(document).ready(function() {
    $('.menu-open > ul').show();
    
    $('ul.menu-list > li > div').on('click', function() {
        var list_element = $(this).parent();
        var submenu = list_element.children('ul');
     
        if (list_element.hasClass('menu-closed')) {
            list_element.addClass('menu-open');
            list_element.removeClass('menu-closed');
            submenu.slideDown('fast');
        }
        else {
            submenu.slideUp('fast');
            list_element.addClass('menu-closed');
            list_element.removeClass('menu-open');
        }
    });
});
</script>

<style>
@font-face {
    font-family: "HelveticaNeueLTStd-Roman"; 
    src: url("https://dl.dropboxusercontent.com/u/21688/temp/HelveticaNeueLTStd-Roman.ttf"),
        url("https://dl.dropboxusercontent.com/u/21688/temp/HelveticaNeueLTStd-Roman.woff"),
        url("https://dl.dropboxusercontent.com/u/21688/temp/HelveticaNeueLTStd-Roman.svg"),
        url("https://dl.dropboxusercontent.com/u/21688/temp/HelveticaNeueLTStd-Roman.eot"),
        url("https://dl.dropboxusercontent.com/u/21688/temp/HelveticaNeueLTStd-Roman.otf");
}

.menu-container {
    background-color: #b4b4b4;
    color: #fff;
    font-family: "HelveticaNeueLTStd-Roman", "Helvetica";
    font-size: 16px;
    padding: 15px;
    width: 170px;
}

ul.menu-list {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
ul.menu-list > li            { margin-bottom: 15px; }
ul.menu-list > li:last-child { margin-bottom:  0px; }
ul.menu-list > li > div { cursor: pointer; } /* clickable header */
ul.menu-list > li > ul { /* submenu list */
    list-style-type: none;
    display: none;
    padding-left: 40px;
}

.menu-arrow {
    width: 0; 
    height: 0; 
    display: inline-block;
    margin-bottom: -3px;
}
.menu-closed .menu-arrow {
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 15.5px solid #fff; /* ~(border-top+border-bottom)*0.866 = equilateral triangle */
    margin-right: 12px;
}
.menu-open .menu-arrow {
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 15.5px solid #fff;
    margin-left: -2px;
    margin-right: 11px;
}
</style>

<div class="menu-container">
    <ul class="menu-list">
        <li class="menu-closed">
            <div>
                <i class="menu-arrow"></i>Shortcuts
            </div>
            
            <ul>
                <li>Lorem Alpha</li>
                <li>Bravo Shortcut</li>
                <li>Ipsum</li>
            </ul>
        </li>
        
        <li class="menu-closed">
            <div>
                <i class="menu-arrow"></i>Tools
            </div>
            
            <ul>
                <li>Lorem Alpha</li>
                <li>Bravo Tool</li>
                <li>Ipsum</li>
            </ul>
        </li>

        <li class="menu-closed">
            <div>
                <i class="menu-arrow"></i>Useful Links
            </div>
            
            <ul>
                <li>Lorem Alpha</li>
                <li>Bravo Useful Link</li>
                <li>Ipsum</li>
            </ul>
        </li>
        
    </ul>
</div>