dropdown menu causes other elements to drop

Hey all,

I have a dropdown menu. When I hover over and the menu drops, all elements in the DOM below it drop as well. I know one solution is to use absolute positioning but I don't know how to make it conducive to this code:

#navLinks {
float: right;
}

#navLinks div {
width: 123px;
background-color: #c3c3c3;
padding: 3px 0 0;
border: 1px solid #707070;
float: left;
}

#navLinks ul.menu {
display: none;
list-style: none;
margin: 0;
padding: 0;
margin-top: 5px;
}

#navLinks li {
margin: 0;
padding: 0;
padding-top: 1px;
border-top: 1px solid #fff;
}

a.menuLink {
font: bold normal normal .9em Trebuchet, sans-serif;
color: #fff;
display: block;
text-align: center;
text-decoration: none;
}

ul.menu a {
font: bold normal normal .85em Trebuchet, sans-serif;
color: #4c4d4c;
text-decoration: none;
display: block;
padding: 3px;
}

ul.menu a:hover, #navLinks a:active {
background-color: #d5d6d5;
}


This is the javascript

window.onload = initAll;

function initAll() {
var allLinks = document.getElementsByTagName("a");

for(var i=0;i<allLinks.length; i++) {
if(allLinks[i].className.indexOf("menuLink") > -1) {
allLinks[i].onmouseover = toggleMenu;
}
}
}

function toggleMenu() {
var startMenu = this.href.lastIndexOf("/") + 1;
var stopMenu = this.href.lastIndexOf(".");
var thisMenuName = this.href.substring(startMenu, stopMenu);

document.getElementById(thisMenuName).style.display = "block";

this.parentNode.className = thisMenuName
this.parentNode.onmouseout = toggleDivOff;
this.parentNode.onmouseover = toggleDivOn;

}

function toggleDivOn() {
document.getElementById(this.className).style.display = "block";

function toggleDivOff() {
document.getElementById(this.className).style.display = "none";
}


Thanks for any response.

When I hover over and the menu drops, all elements in the DOM below it drop as well. Sorry, the code provided is insufficient to identify the issue. Can we have a link to your page?