Issue With Offsets and Display Property

[Jamalwinters]

Javascript:

function hoverMenu(listItem, menuName)
{
	if (document.getElementById(menuName).isActive == "1")
	{
		var listItemHeight = document.getElementById(listItem).offsetHeight;
		var itemTop = document.getElementById(listItem).offsetTop;
		var itemLeft = document.getElementById(listItem).offsetLeft;
		document.getElementById(menuName).style.top = itemTop + listItemHeight + "px";
		document.getElementById(menuName).style.left = itemLeft + "px";
		document.getElementById(menuName).style.display = "block";
		document.getElementById(menuName).style.opacity = "1.0";	
		document.getElementById(menuName).isActive = "0";
	}
	
	else
	{
		var listItemHeight = document.getElementById(listItem).offsetHeight;
		var itemTop = document.getElementById(listItem).offsetTop;
		var itemLeft = document.getElementById(listItem).offsetLeft;
		document.getElementById(menuName).style.top = itemTop + listItemHeight + "px";
		document.getElementById(menuName).style.left = itemLeft + "px";
		document.getElementById(menuName).style.display = "block";	
		menuFade(menuName);
		document.getElementById(menuName).isActive = "0";
	}
	
}

function hoverMenuTier2(listItem, menuName)
{
	if (document.getElementById(menuName).isActive == "1")
	{
		var itemTop = document.getElementById(listItem).offsetTop;
		var itemLeft = document.getElementById(listItem).offsetLeft;
		document.getElementById(menuName).style.top = itemTop + "px";
		document.getElementById(menuName).style.left = itemLeft + "px";
		document.getElementById(menuName).style.display = "block";
		document.getElementById(menuName).style.opacity = "1.0";	
		document.getElementById(menuName).isActive = "0";
	}
	
	else
	{
		var itemTop = document.getElementById(listItem).offsetTop;
		var itemLeft = document.getElementById(listItem).offsetLeft;
		document.getElementById(menuName).style.top = itemTop + "px";
		document.getElementById(menuName).style.left = itemLeft + "px";
		document.getElementById(menuName).style.display = "block";	
		menuFade(menuName);
		document.getElementById(menuName).isActive = "0";
	}
	
}

function hideThis(menuName)
{
	document.getElementById(menuName).style.display = "none";
	document.getElementById(menuName).style.opacity = "0";
}

function showMenu(menuName)
{
	document.getElementById(menuName).style.display = "block";
	document.getElementById(menuName).style.opacity = "1.0";
	document.getElementById(menuName).isActive = "1";
}

HTML:

<div id='db-sub' class='ddm-db' onmouseover="showMenu('db-sub');" onmouseout="hideThis('db-sub');">
            <ul>
                <a href='#'><li id='dba' class='sub'>1</li></a>
                <a href='#'><li class='sub'>2</li></a>
                <a href='#'><li class='sub'>3</li></a>
                <a href='#'><li class='sub'>4</li></a>
                <a href='#'><li class='sub'>5</li></a>
                <a href='#'><li class='sub'>6</li></a>
                <a href='#'><li class='sub'>7</li></a>
                <a href='#'><li class='sub'>8</li></a>
                <a href='#'><li id='dbq' onmouseover="hoverMenuTier2('dbq', 'dbq-sub');" onmouseout="hideThis('dbq-sub');" class='submenuArrow'>9</li></a>
                <a href='#'><li class='sub'>10</li></a>
                <a href='#'><li class='sub'>11</li></a>
                <a href='#'><li class='sub'>12</li></a>
                <a href='#'><li class='sub'>13</li></a>
            </ul>
        </div>

The remaining HTML for the the 'dqb-sub' element that is displayed follows an identical format to 'db-sub'. Mousing over the upper elements produces a drop-down menu that is aligned with the position of the top-most element in question. Mousing over the 'dbq' element produces the element 'dbq-sub' at the (0,0) position of the window, which is my issue. I believe it has to do with the fact that I'm setting the display property to 'none', which essentially destroys the element, along with its properties. What doesn't make sense is that while the 'db-sub' element is set to a block display type, it should have valid, non-zero offsets. I'd like the 'dbq-sub' element to position based on where the 'dbq' element is. Any ideas?

[Jamalwinters]

Ended up creating a workaround for this by counting the number of <li> tags before the one being moused over. More complicated than I wanted it to turn out, so if anyone has a solution to the above positioning issue, would be appreciated!