First press the tab key, the first link will be highlighted then press the right arrow keys to see the focus jumping to next level navigation traversing ahead, similar way once I click the left arrow key focus has to come back.

In the following code keycode 39 is working fine. Can someone help me once i press keycode 37 the focus has to go back.

Full html code in fiddle.

<script>
$('.we-mega-menu-ul>.dropdown-menu a').keydown(function (e) {
if ([37, 39].indexOf(e.keyCode) === -1) {
    return;
}
var link = $(this);
switch (e.keyCode) {
    case 37: // left arrow key
    // Make sure to stop event bubbling
    e.preventDefault();
    e.stopPropagation();
    if (link.parent('li').find('li').filter(':visible').first().length === 0) {
        link.parent('li').find('li').filter(':visible').last().find('a').first().focus();
    }
    else {
        link.parent('li').find('li').filter(':visible').first().find('a').first().focus();
    }
    break;
    case 39: // right arrow key
    e.preventDefault();
    e.stopPropagation();
    if (link.parent('li').find('li').filter(':visible').first().length === 0) {
        link.parent('li').find('li').filter(':visible').last().find('a').first().focus();
    }
    else {
        link.parent('li').find('li').filter(':visible').first().find('a').first().focus();
    }
    break;
}
});
</script>