Pure CSS & JS drop down menu - onmouseover issue

Pure CSS & JS drop down menu - onmouseover issue

I've written this code to create simple CSS and Javascript dropdown menu.
HTML:
<li><a href="#" onmouseover="showRanksSubmenu()"
onmouseout="hideRanksSubmenu()">XYZ</a>
<ul id="rankSubMenu" onmouseover="showRanksSubmenu()"
onmouseout="hideRanksSubmenu()">
<li><a href="#" style="position: absolute; top: 12px;">AAA</a></li>
<li><a href="#" style="position: absolute; top: 50px;">BBB</a></li>
<li><a href="#" style="position: absolute; top: 88px;">CCC</a></li>
</ul>
</li>
CSS:
#rankSubMenu {
display: none;
position: absolute;
bottom: 10px;
left: 278px;
}
JS:
function showRanksSubmenu() {
document.getElementById('rankSubMenu').style.display = 'block';
}
function hideRanksSubmenu() {
document.getElementById('rankSubMenu').style.display = 'none';
}
Menu items have of course some height, background and other stuff to make
them look like buttons. The problem is that, there is some empty space
between this buttons (like a few pixels) and when user stops mouse cursor
there, menu disappear (in fact menu always does that, unless you move your
cursor real fast). I tried to define this whole area as div or try any
other ideas that I thought about, but with no success. Any suggestions how
can I solve this?