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(); }); })