IE6 and IE7 onMouseout event toElement problem for dropdown

Question

I have a div#dropdownCont with onmouseout and onmouseover listeners attached via:

domTarget.attachEvent('onmouseout', function(e){hideDropDown(e);});
domTarget.attachEvent('onmouseover', function(e){showDropDown(e);});

The dropdown works like this -- when mouseover event happens, the div#dropdownCont expands downwards as its childnode, div#dropdown, gets "display:block".

However, if you then move your mouse pointer downards, still within the expanded div#dropdownCont, but now outside of the original div#dropdownCont size, IE6/7 would then see the div layer(with lower z-index value) directly beneath div#dropdownCont visually and sets it as the toElement. This of course, would make the dropdown to disappear as it assume an mouseout event happened, and makes for a very farked up experience. Any help (i would prefer not using timeouts to hack around this problem) would be appreciated.