Cross-browser javascript menu with few lines of code
 

Menu is about three things :
1) Position
2) Show-hide
3) Content

the Positining function is this :
function elementPosition(obj) {
var curleft = 0, curtop = 0;

if (obj.offsetParent) {
curleft = obj.offsetLeft;
curtop = obj.offsetTop;

while (obj = obj.offsetParent) {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
}
}

return { x: curleft, y: curtop };
}

the rest is Show-hide and content issues :

var _time_out = null;
function show_menu(ele,divToShow)
{
if(_time_out != null)
{
clearTimeout(_time_out);
}
var _pos = elementPosition(ele);
document.getElementById('dvMenu').style.left = _pos.x + "px";
document.getElementById('dvMenu').style.top = (_pos.y + 30) + "px";
document.getElementById('dvMenu').innerHTML = document.getElementById(divToShow).innerHTML;
document.getElementById('dvMenu').style.visibility = "visible";
}
function hide_menu()
{
_time_out = setTimeout("document.getElementById('dvMenu').style.visibility = 'hidden'",200);
}

the content container is this :

<div id="dvMenu" style="position:absolute;top:100px;left:100px;color:White;font-family:Verdana;font-size:11px;visibility:hidden;z-index:100;background-color:#2b2b2b" onmouseout="this.style.visibility='hidden'" onmouseover="clearTimeout(_time_out)"></div>

create your content divs :

<div id="foo">
<a href="http://www.foo.com" onmouseout="event.cancelBubble=true" onmouseover="this.parentNode.style.visibility='visible'>go to foo</a>
<a href="http://www.foo1.com" onmouseout="event.cancelBubble=true" onmouseover="this.parentNode.style.visibility='visible'>go to foo1</a>
</div>

menu buttons will be like this :

<img src="foo" onmouseover="show_menu(this,'foo')" onmouseout="hide_menu()" />