title: positioning the popup menu with jquery based on element position in window
body: <p>I am sure this question may have been asked, but I couldn't find the right solution..</p>
  
  <p>I need to show a menu on mouse over of an icon which can be placed anywhere on the page. Example code is here: ( <a href="http://jsfiddle.net/Qfjdk/2/" rel="nofollow">http://jsfiddle.net/Qfjdk/2/</a> )
  This shows the popup, however if I change the code from</p>
  
  <pre><code>#nav {
      margin:0; 
      padding:0; 
      list-style:none;
      float: left;
  }   
  </code></pre>
  
  <p>to</p>
  
  <pre><code>#nav {
      margin:0; 
      padding:300px; 
      list-style:none;
      float: right;
  }  
  </code></pre>
  
  <p>As can be seen, the position of the menu is always centered below. I want to change the position of the menu based on where the icon is displayed. </p>
  
  <p>If the icon element is aligned right, I want to position the menu to start on right edge of icon. If the icon element is towards bottom left of displayed page, I want the menu bottom left to align with element top left etc.. </p>
  
  <p>I am not looking for the algorithm, am looking for the right way of setting parameters.. 
  Appreciate your help</p>