jQuery Sub-Menu - position() does not work

Question

I am trying to create a sub-menu. But the position() function of jQuery UI does not place the sub-menu in the right position (right side of its menu item). The sub-menu appears like it was clipped.

<script>
    $(function() {
        $('.menu').hide();

        $('#action').on('mouseenter', function() {
            var menu = $('#menu');
            menu.show();
            menu.position({
                of: this,
                my: 'left top',
                at: 'left bottom'
            });
        });

        $('.menuItem').on('mouseenter', function() {
            var menu = $(this).find('.menu');
            menu.show();
            menu.position({
                of: this,
                my: 'left top',
                at: 'right top'
            });
        });
    });
</script>

<button id="action">Action</button>
<div id="menu" class="menu">
    <div class="menuItem">
        <span>Item1</span>
    </div>
    <div class="menuItem">
        <span>Item2</span>
    </div>
    <div class="menuItem">
        <span>Item3</span>
        <div class="menu">
            <div class="menuItem">
                <span>Item4</span>
            </div>
            <div class="menuItem">
                <span>Item5</span>
            </div>
            <div class="menuItem">
                <span>Item6</span>
            </div>
        </div>
    </div>
</div>

Thanks for your help !

Answer 1

Problem is with your css

.menu{ border: 1px solid #333;display:inline-block;wdth:100%;position:absolute;}
.menuItem{ border: 1px solid red;}

appky above like css and check this fiddle for answer.

http://jsfiddle.net/2xxy3acx/