How do I make my collapsible menu such that it won't cause the rest of the content being pushed down?

Dear experts,

I have incorporated a collapsible menu which allows them to expand the menu and select the links.

However, whenever the menu is expanded, my content in the body will be pushed down.

I have seen people's collapsible menu open up without pushing other contents down etc.

Hope that someone can tell me how to tweak the existing code in order to do so. thanks.

<div onClick="openClose('a1')" class="main"><span id="tick_a1">+</span> <span class="mainLink">Hi5Digest</span></div>
                       <div id="a1" class="links">
                           <!-- below is an example of nested sub-links -->
                           <div onClick="openClose('b1')" class="main"><span id="tick_b1">+</span> <span class="mainLink">Articles</span></div>
                           <div id="b1" class="links">
                               <a href="article1.jsp" class="link">How to make your child study better?</a>
                               <a href="article2.jsp" class="link">Examinations Study Tips</a>
                               <a href="article3.jsp" class="link">Buidling firm foundations....</a>
                           </div>
                       </div>

function toggleMenu(objID) {
if (!document.getElementById) return;
var ob = document.getElementById(objID).style;
ob.display = (ob.display == 'block')?'none': 'block';
}

if (document.getElementById) {
document.writeln('<style type="text/css"><!--')
document.writeln('.main {text-decoration:none; color:white; cursor:hand; cursor:pointer}')
document.writeln('span:hover.mainLink {text-decoration:underline; color:red}')
document.writeln('.links {display:none; padding-left:14px}')
document.writeln('.link {text-decoration:none; color:blue}')
document.writeln('a:hover.link {text-decoration: underline; color: red}')
document.writeln('//--></style>') }

function openClose(theID) {
if (document.getElementById(theID).style.display == "block") {
    document.getElementById(theID).style.display = "none";
    document.getElementById("tick_"+theID).innerHTML = "+"; }
else {
    document.getElementById(theID).style.display = "block";
    document.getElementById("tick_"+theID).innerHTML = "-"; } }
// -->