с убиранием списка разобрался, когда чуть присмотрелся в код
блин вот я дибил додуматься раньше не смог 
а как сделать так, чтобы новоявленный список покрывал собой то что внизу, т.е. не раздвигал код а ложился поверх?
<div onmouseover="document.getElementById('table').style.display = 'block'" onmouseout="document.getElementById('table').style.display = 'none'">Активный элемент</div><br>
<table id="table" style="display:none;border:1px solid black">
<tr>
<td style="background-color:#cc0000">Элемент один</td>
</tr>
<tr>
<td style="background-color:#00cc00">Элемент два</td>
</tr>
</table>
что-то ещё