Keeping dropdown menu in the edge of window viewport

I am using a css dropdown menu for my project.The menu has different dropdown level.I want to keep them in my viewport.Here is an example : jsFiddle link
If you resize the screen on bottom right and see the menu on it , you will see it goes out of the viewport.I want to keep them in viewport .It might be in anty level.
I have just tried :

var el = $('ul.nav-menu > li > ul > li > ul')[0];
    $('ul.nav-menu > li > ul > li').hover(function(){
        if(!isElemInViewport(el)){
            el.addClass('move-left');
        }
    }, function(){
    if(!isElemInViewport(el)){
            el.removeClass('move-left');
         }
    })

But it is not working


Source: css

Leave a Reply