position:absolute?

[teremka]

Hello!

I am trying to create a very simple side-bar menu. Everything works, except for one thing.

I have a bunch of <div> on the side of the page:
<div id="IslandInfo" style="display:none; position:absolute; top:236px; left:9px;">

At the top of my page, I have a few image links. When one of them is clicked, it calls a javascript function.
function expand(thisone,other1,other2,other3,other4,other5, other6) {
var thisDiv = document.getElementById(thisone);
var otherDiv1 = document.getElementById(other1);
var otherDiv2 = document.getElementById(other2);
var otherDiv3 = document.getElementById(other3);
var otherDiv4 = document.getElementById(other4);
var otherDiv5 = document.getElementById(other5);
var otherDiv6 = document.getElementById(other6);
if (thisDiv.style.display != 'none') {
thisDiv.style.display = 'none';
}
else {
thisDiv.style.display = '';
otherDiv1.style.display = 'none';
otherDiv2.style.display = 'none';
otherDiv3.style.display = 'none';
otherDiv4.style.display = 'none';
otherDiv5.style.display = 'none';
otherDiv6.style.display = 'none';
}
}

This basically makes one of the <div> menus visible (display).

The problem is this: I want all of the <div> menus to be positioned in the same place (ie: at the top of the side-bar and not one under the other). So, I used position:absolute and gave them position values. The problem with this is that when they expand, they overlap the other content on the page instead of pushing it all down.

Any ideas?? Thanks so much!
T

[chrishirst]

bit of a long winded way of handling it in the javascript and prone to errors

take a look at my code and CSS in DHTML Drop Down (http://www.candsdesign.co.uk/articles/dhtml/menus/drop-down/) Click the show code link to download the code