Navbar menu auto align subitems

index.html

<ul>
    <li class="opened">
        <a href="">Item 1</a>
        <ul class="submenu">
            <li>Sub item 1</li>
            <li>Sub item 2</li>
            <li>Sub item 3</li>
            <li>Sub item 4</li>
        </ul>
    </li>
    <li>
        <a href="">Item 2</a>
        <ul class="submenu">
            <li>Sub item 1</li>
            <li>Sub item 2</li>
            <li>Sub item 3</li>
            <li>Sub item 4</li>
        </ul>
    </li>
    <li>
        <a href="">Item 3</a>
        <ul class="submenu">
            <li>Sub item 1</li>
            <li>Sub item 2</li>
            <li>Sub item 3</li>
            <li>Sub item 4</li>
        </ul>
    </li>
</ul>

navbar-subitems-auto-align.js

function submenuAlign() {
    var activePositionLeft = $(".opened").position().left;
    var activeWidth = $(".opened").width();
    // console.log( 'left: ' + activePositionLeft + ' width: ' + activeWidth);

    $(".opened").children().each(function(){
        if( $(this).hasClass('submenu') ) {
            var submenuWidth = $(this).width();
            // console.log( 'submenuwidth: ' + submenuWidth);
            var liSum = 0;
            $(this).children().each(function() {
                liSum = liSum + $(this).width();
            });

            var dangerZone = liSum + activePositionLeft;
            // console.log( 'danger zone: ' + dangerZone );
            if (dangerZone > submenuWidth) {
                $(this).addClass("right");
            } else {
                $(this).css('margin-left', activePositionLeft + 'px');
            }
        }
});
}

style.css

.right { width: auto; left: auto; right: 0; }