Layer positioning

[Pirate]

I'm having a bit of fun with a menu I've created. The thing is I want though is the menus to pop out from the image without having to use absolute positioning. I've tried relative positioning, but that opens a huge white space below, and static positioning also messes things up.

Does anyone have any idea?

This is my code so far.

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}

function hidemenu(){
if (window.menuobj)
menuobj.style.visibility="hidden"
}
function delayhidemenu(){
delayhide=setTimeout("hidemenu()",500)
}
//-->
</script>
<table class="tborder" cellpadding="0" cellspacing="0" border="0" width="100%" onMouseOut="MM_showHideLayers('Layer1','','hide','Layer2','',' hide','Layer3','','hide','Layer4','','hide','Layer 5','','hide')" bgcolor="">
<tr>
<td>
<table bgcolor="#000000" cellpadding="$stylevar[cellpadding]" cellspacing="1" border="0" width="100%" height="146">
<tr>
<td height="20" class="thead" onMouseover="MM_showHideLayers('Layer1','','show','Layer2','',' hide','Layer3','','hide','Layer4','','hide','Layer 5','','hide')"><img src="$stylevar[imgdir_button]/menu_tier.gif" alt="" border="0" align="right" onClick="MM_showHideLayers('Layer1','','hide','Layer2','',' hide','Layer3','','hide','Layer4','','hide','Layer 5','','hide')" /><strong>:: Collections</strong></td>
</tr>
<tr>
<td height="20" class="thead" onMouseover="MM_showHideLayers('Layer1','','hide','Layer2','',' show','Layer3','','hide','Layer4','','hide','Layer 5','','hide')"><img src="$stylevar[imgdir_button]/menu_tier.gif" alt="" border="0" align="right" onClick="MM_showHideLayers('Layer1','','hide','Layer2','',' hide','Layer3','','hide','Layer4','','hide','Layer 5','','hide')" /><strong>:: Skips</strong></td>
</tr>
<tr>
<td height="20" class="thead" onMouseover="MM_showHideLayers('Layer1','','hide','Layer2','',' hide','Layer3','','show','Layer4','','hide','Layer 5','','hide')"><img src="$stylevar[imgdir_button]/menu_tier.gif" alt="" border="0" align="right" onClick="MM_showHideLayers('Layer1','','hide','Layer2','',' hide','Layer3','','hide','Layer4','','hide','Layer 5','','hide')" /><strong>:: IT</strong></td>
</tr>
<tr>
<td height="20" class="thead" onMouseover="MM_showHideLayers('Layer1','','hide','Layer2','',' hide','Layer3','','hide','Layer4','','show','Layer 5','','hide')"><img src="$stylevar[imgdir_button]/menu_tier.gif" alt="" border="0" align="right" onClick="MM_showHideLayers('Layer1','','hide','Layer2','',' hide','Layer3','','hide','Layer4','','hide','Layer 5','','hide')" /><strong>:: Human Resources</strong></td>
</tr>
<tr>
<td height="20" class="thead" onMouseover="MM_showHideLayers('Layer1','','hide','Layer2','',' hide','Layer3','','hide','Layer4','','hide','Layer 5','','show')"><img src="$stylevar[imgdir_button]/menu_tier.gif" alt="" border="0" align="right" onClick="MM_showHideLayers('Layer1','','hide','Layer2','',' hide','Layer3','','hide','Layer4','','hide','Layer 5','','hide')" /><strong>:: Your Links</strong></td>
</tr>
</table>
</td>
</tr>
</table><img alt="" src="$vboptions[bburl]/$vboptions[cleargifurl]" width="5" height="5" /><br>


<!-- Pop up Menus -->
<div id="Layer1" style="position:absolute; left:170px; top:275px; width:153px; height:178px; z-index:1; visibility: hidden;" onMouseOut="MM_showHideLayers('Layer1','','hide')">
<table class="tborder" border="1" cellpadding="0" cellspacing="1" onMouseOver="MM_showHideLayers('Layer1','','show')">
<tr>
<td><table width="150" cellpadding="4" cellspacing="1" border="0" bgcolor="#FFFFFF">
<tr><td class="thead" onClick="MM_showHideLayers('Layer1','','hide')">Collections</td></tr>
<!--<tr><td class="vbmenu_option"><a href="$vboptions[bburl]/view.php?&pg=deft" onClick="MM_showHideLayers('Layer1','','hide')">DEFT Payments</a></td></tr>-->
<tr><td class="vbmenu_option"><a href="$vboptions[bburl]/view.php?&pg=trc_storage" onClick="MM_showHideLayers('Layer1','','hide')">TRC Storage</a></td></tr>
<tr><td class="vbmenu_option"><a href="quiz.php?$session[sessionurl]" onClick="MM_showHideLayers('Layer1','','hide')">Training</a></td></tr>
<tr><td class="vbmenu_option"><a href="$vboptions[bburl]/view.php?&pg=elearning_main" onClick="MM_showHideLayers('Layer1','','hide')">E-Learning Centre</a></td></tr>
<if condition="$bbuserinfo['userid']">
<tr onMouseOver="MM_showHideLayers('Layer1','','show')"><td class="vbmenu_option"><a href="#" onClick="window.open('$vboptions[bburl]/view.php?&pg=sms_service','sms','width=440,height=277')" onClick="MM_showHideLayers('Layer1','','hide')">Send SMS</a></td></tr>
</if>
</table></td>
</tr>
</table></div>
<div id="Layer2" style="position:absolute; left:170px; top:304px; width:153px; height:178px; z-index:1; visibility: hidden;" onMouseOut="MM_showHideLayers('Layer2','','hide')">
<table class="tborder" border="0" cellpadding="0" cellspacing="1" onMouseOver="MM_showHideLayers('Layer2','','show')">
<tr>
<td><table width="150" cellpadding="4" cellspacing="1" border="0" bgcolor="#FFFFFF">
<tr><td class="thead" onClick="MM_showHideLayers('Layer2','','hide')">Skips</td></tr>
<tr><td class="vbmenu_option"><a href="$vboptions[bburl]/vbindex.php?page=searchmonster" onClick="MM_showHideLayers('Layer2','','hide')" onMouseout="delayhidemenu()">Search Monster</a></td></tr>
</table></td>
</tr>
</table></div>
<div id="Layer3" style="position:absolute; left:170px; top:333px; width:153px; height:178px; z-index:1; visibility: hidden;" onMouseOut="MM_showHideLayers('Layer3','','hide')">
<table class="tborder" width="" border="0" cellpadding="0" cellspacing="1" onMouseOver="MM_showHideLayers('Layer3','','show')">
<tr>
<td><table width="150" cellpadding="4" cellspacing="1" border="0" bgcolor="#FFFFFF">
<tr><td class="thead" onClick="MM_showHideLayers('Layer3','','hide')">IT</td></tr>
<tr><td class="vbmenu_option"><a href="http://helpdesk/" onClick="MM_showHideLayers('Layer3','','hide')">Helpdesk</a></td></tr>
<tr><td class="vbmenu_option"><a href="$vboptions[bburl]/downloads.php" onClick="MM_showHideLayers('Layer3','','hide')">Online Forms</a></td></tr>
</table></td>
</tr>
</table></div>
<div id="Layer4" style="position:absolute; left:170px; top:362px; width:153px; height:178px; z-index:1; visibility: hidden;" onMouseOut="MM_showHideLayers('Layer4','','hide')">
<table class="tborder" width="" border="0" cellpadding="0" cellspacing="1" onMouseOver="MM_showHideLayers('Layer4','','show')">
<tr>
<td><table width="150" cellpadding="4" cellspacing="1" border="0" bgcolor="#FFFFFF">
<tr><td class="thead" onClick="MM_showHideLayers('Layer4','','hide')">Human Resources</td></tr>
<tr><td class="vbmenu_option"><a href="$vboptions[bburl]/calendar$ext?$session[sessionurl]" onClick="MM_showHideLayers('Layer4','','hide')">$vbphrase[calendar]</a></td></tr>
<tr><td class="vbmenu_option"><a href="$vboptions[bburl]/calendar.php?do=viewreminder" onClick="MM_showHideLayers('Layer4','','hide')">Reminders</a></td></tr>
<tr><td class="vbmenu_option"><a href="$vboptions[bburl]/view.php?&pg=meetingrooms" onClick="MM_showHideLayers('Layer4','','hide')">Book a meeting room</a></td></tr>
<tr><td class="vbmenu_option"><a href="$vboptions[bburl]/calendar$ext?$session[sessionurl]" onClick="MM_showHideLayers('Layer4','','hide')">Check for room bookings</a></td></tr>
<tr><td class="vbmenu_option"><a href="$vboptions[bburl]/view.php?pg=info_main" onClick="MM_showHideLayers('Layer4','','hide')">Info Centre</a></td></tr>
<!--<tr><td class="vbmenu_option"><a href="private.php" onClick="MM_showHideLayers('Layer4','','hide')">Mailbox</a></td></tr>-->
<tr><td class="vbmenu_option"><a href="$vboptions[bburl]/downloads.php" onClick="MM_showHideLayers('Layer4','','hide')">Online Forms</a></td></tr>
</table></td>
</tr>
</table></div>
<div id="Layer5" style="position:absolute; left:170px; top:400px; width:153px; height:178px; z-index:1; visibility: hidden;" onMouseOut="MM_showHideLayers('Layer5','','hide')">
<table class="tborder" width="" border="0" cellpadding="0" cellspacing="1" onMouseOver="MM_showHideLayers('Layer5','','show')">
<tr>
<td><table width="150" cellpadding="4" cellspacing="1" border="0" bgcolor="#FFFFFF">
<tr><td class="thead" onClick="MM_showHideLayers('Layer5','','hide')">Your Links</td></tr>
$customquicklinks
<tr><td class="vbmenu_option"><a href="$vboptions[bburl]/profile.php?do=editquicklinks" onClick="MM_showHideLayers('Layer5','','hide')"><i>Add Links</i></a></td></tr>
</table></td>
</tr>
</table></div>
<!-- /Pop up Menus -->

[Spingo]

It looks like you're writing a letter...

I mean, it looks like you're looking to extend the dropdown menus provided in vBulletin. Is this the case? If so, I should be able to hook you up with some of my code for a vBulletin mod that I've been working on that incorporates this...