Position one element relative to another with jQuery

For Exampple, Position one element relative to another with jQuery...

Demo

HTML

<div id="menu">
        <ul>
                <li>Menu list item</li>
                <li>Menu list item</li>
                <li>Menu list item</li>
                <li>Menu list item</li>
                <li>Menu list item</li>
        </ul>
</div>
<div class="submenu">
        <ul>
                <li>Menu sub list item</li>
                <li>Menu sub list item</li>
                <li>Menu sub list item</li>
                <li>Menu sub list item</li>
        </ul>
</div>

CSS

<style>
        ul { 
                padding: 0; 
        }
        ul li { 
                list-style: none; 
        }
        #menu { 
                display: none; 
        }
        .submenu { 
                position: absolute; 
                left: 0; 
                top: 0; 
        }
        #menu, .submenu li { 
                border: 1px solid black; 
                padding: 10px; 
                margin: 10px; 
        }
</style>

Jquery

        $(function(){
                $(".submenu li").mouseover(function() {
                var pos = $(this).position();
            
                // .outerWidth() takes into account border and padding.
                var width = $(this).outerWidth();
            
                //show the menu directly over the submenu list item
                $("#menu").css({
                        position: "absolute",
                        top: pos.top + "px",
                        left: (pos.left + width) + "px"
                        }).show();
                });
        })