JQuery flyout menu pointer
<p><a href="http://jsfiddle.net/6Jhaw/" rel="nofollow">This (JSFiddle)</a> is that code I have now. I want to animate a pointer so that when the user clicks the list item the pointer slides to the right/left and stays in the middle of the sub list items. How I thought of doing it was to find the amount of pixels to the left of the main list item and then width/2 and add them. Does this sound right? or should I do something different. Thank you.</p>

<pre><code>    (function(){  

var closetimer = 0;
var menuitem = 0;
var arr_position = 0;

function arrow () {
   var ele = $('.a'); &lt;----// how can I make this a variable
                           // according to which link I select?
   var pos = ele.position(); 
   var width = ele.width()/2;
   var left = pos.left;
}

function flyout_open(event)
{
   flyout_close();
   var submenu = $(this).find('ul');
   var arr = $('.arrow');
    if(submenu){
        menuitem = submenu.fadeIn(200);
        return false;
    }
    return true;
}

function flyout_close()
{  if(menuitem) menuitem.fadeOut(200);}

$(document).ready(function()
{  $('#flyout li').bind('click', flyout_open);
});

document.onclick = flyout_close;
</code></pre>

<p>})();</p>
