[mtaylor314]

function show_div(element)
{
	for (var loop = 0; loop < divs.length; loop++)
	{
		Element.hide(divs[loop]);
	}
	makePositionedCoords(element,-yMousePos+(.4*yMousePos),xMousePos);
	Element.show(element);
}

function makePositionedCoords(element,x,y)
{
    element = $(element);
    var pos = Element.getStyle(element, 'position');
    if (pos == 'static' || !pos)
	{
    	element._madePositioned = true;
      	element.style.position = 'absolute';
	  
      	if (window.opera)
		{
        	element.style.top = 0;
        	element.style.left = 0;
      	}
    }
	element.style.top = -x;
	element.style.left = y;
}

function captureMousePosition(e)
{
	if (document.layers)
	{
		xMousePos = e.pageX;
		yMousePos = e.pageY;
		xMousePosMax = window.innerWidth+window.pageXOffset;
		yMousePosMax = window.innerHeight+window.pageYOffset;
	}
	else if (document.all)
	{
		xMousePos = window.event.x+document.body.scrollLeft;
		yMousePos = window.event.y+document.body.scrollTop;
		xMousePosMax = document.body.clientWidth+document.body.scrollLeft;
		yMousePosMax = document.body.clientHeight+document.body.scrollTop;
	}
	else if (document.getElementById)
	{
		xMousePos = e.pageX;
		yMousePos = e.pageY;
		xMousePosMax = window.innerWidth+window.pageXOffset;
		yMousePosMax = window.innerHeight+window.pageYOffset;
	}
}

function hide_div(element)
{
	Element.hide(element);
}

That is my javascript that I have to display a hidden div

<div style="display:none; position:absolute;" id="foo"><table style="border:solid;"><tr><td>Insert foo <a href="">Link</a></td></tr></table></div>

I want the div to appear whenever they have the event onmouseover

	<li class="linav"><a class="sidenav" onmouseover="show_div('foo');" href="">foo</a></li>

Unfortunately, the div appears in the upper left-hand corner of the browser. How do I get this to appear at the coordinates of the mouse and also to not disappear if they go into the <div>. I have placed all the hidden div's after the footer.