Set multilevel top navigation menu bar dynamically using jQuery

Menu will look like example image given below:

Add below jQuery in the head section of the page:

$(document).ready(function(){
    $('ul.classname li.classname').each(function(){
        $(this).find('ul').each(function(){
            $(this).find('li').each(function(){
                $(this).find('a').append('<span class="navi-arrowright"></span>');
                $(this).find('a:last').find('span').remove();
            });
        });
    $(this).find('a:first').css('padding-right','25px').append(<img src="/images/down-arrow.png" />');

    });

});

Add below CSS in the style sheet then add on header of the page:

.navi-arrowright {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/menu-arrow-right.png");
    background-origin: padding-box;
    background-position: right top;
    background-repeat: no-repeat;
    background-size: auto auto;
    float: right;
    height: 7px;
    position: absolute;
    right: 9px;
    top: 13px;
    width: 4px;
}