Why do my div positions not remain constant with .position()

Why do my div positions not remain constant with .position()

Hi,

I am trying to build a mega drop down with JQuery. I have binded a mouseover and mouseout event to an unordered list where each li is a navigation option and have a div child which onmouseover should .show() and .position() underneath the navigation option. This works as expected on the first mouseover but for subsequent mouseovers it seems to move down and across from its previous position. Please can someone advise what I am doing wrong or what I need to change so that the div positions are persistant.

Any additional advise on how to add a delay to the div hiding whilst the mouse is moved within the div from the li would also be appreciated.

My source is shown below:

  1. <html>
  2.     <head>
  3.         <style type="text/css">
  4.             ul.nav
  5.             {
  6.                 list-style:none;
  7.             }
  8.             ul.nav li
  9.             {
  10.                 float:left;
  11.             }
  12.             ul.nav li div
  13.             {
  14.                 position:absolute;
  15.                 display:none;
  16.                 background:#123456;
  17.             }
  18.         </style>
  19.         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  20.         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
  21.         <script type="text/javascript">
  22.             $(document).ready(function(){
  23.                 $('.nav').find('li').bind('mouseover',function(){
  24.                     $('div',this).position({
  25.                         my: 'left top',
  26.                         at: 'left bottom',
  27.                         of: $(this),
  28.                         offset: '0 0',
  29.                         collision: 'flip fit'
  30.                     });
  31.                     $('div',this).show('slow');
  32.                 });
  33.                 $('.nav').find('li').bind('mouseout',function(){
  34.                     $('div',this).hide('slow');
  35.                 });
  36.             });
  37.         </script>
  38.     </head>
  39.     <body>
  40.         <ul class="nav">
  41.             <li>
  42.                 Nav 1
  43.                 <div>
  44.                     Text 1
  45.                 </div>
  46.             </li>
  47.             <li>
  48.                 Nav 2
  49.                 <div>
  50.                     Text 2
  51.                 </div>
  52.             </li>
  53.             <li>
  54.                 Nav 3
  55.                 <div>
  56.                     Text 3
  57.                 </div>
  58.             </li>
  59.             <li>
  60.                 Nav 4
  61.                 <div>
  62.                     Text 4
  63.                 </div>
  64.             </li>
  65.             <li>
  66.                 Nav 5
  67.                 <div>
  68.                     Text 5
  69.                 </div>
  70.             </li>
  71.         </ul>
  72.     </body>
  73. </html>