I use Firefox by the way. This is supposed to be a listbox. The zIndex is supposed to bring at a new layer to prevent the other objects from moving down, during the onmouseover. During the onmouseout zIndex should bring it back to the proper layer.
As for the overflow, everything seems fine before clicking any link. After clicking a link it shows scrollbars. It shouldn’t.
<div id="ta_select" onmouseover="document.getElementById('ta_select').style.height = '144px'; document.getElementById('ta_select').style.zIndex= '2'; " onmouseout="document.getElementById('ta_select').style.height = '19px'; document.getElementById('ta_select').style.zIndex= '1';" style=" float: left; margin: 5px 0px 0px 5px; border: 1px solid #7A1010; background-color: #EAE8C8; width: 145px; height: 24px; font-size: 13px; color: #7A1010; background-color: #EAE8C8; overflow-x: none; overflow-y: auto; text-decoration: none; display: block;">
<a href="JavaScript:;" onmouseover="this.style.color = '#EAE8C8'; this.style.backgroundColor = '#7A1010'; " onmouseout="this.style.color = '#7A1010'; this.style.backgroundColor = '#EAE8C8';" style="float: left; margin: 0px 0px 0px 5px; display: block; text-align: left; width: 140px; height: 24px; color: #7A1010; background-color: #EAE8C8; text-decoration: none; overflow-x: none; overflow-y: auto;">
<span>How Many Textareas?<img src="../images/triangle-down.gif" style="float: right; width: 17px; height: 17px; border: none;" /></span>
</a>
<a href="JavaScript: var file= 'getfiles/textareas.php?ta=3'; changeTa();" onmouseover="this.style.color = '#EAE8C8'; this.style.backgroundColor = '#7A1010'; " onmouseout="this.style.color = '#7A1010'; this.style.backgroundColor = '#EAE8C8';" style="float: left; padding: 0px 0px 0px 5px; display: block; text-align: left; width: 140px; height: 24px; color: #7A1010; background-color: #EAE8C8; text-decoration: none; overflow-x: none; overflow-y: auto; ">
<span>3 Textareas</span>
</a>
<a href="JavaScript: var file= 'getfiles/textareas.php?ta=5'; changeTa();" onmouseover="this.style.color = '#EAE8C8'; this.style.backgroundColor = '#7A1010'; " onmouseout="this.style.color = '#7A1010'; this.style.backgroundColor = '#EAE8C8';" style="float: left; padding: 0px 0px 0px 5px; display: block; text-align: left; width: 140px; height: 24px; color: #7A1010; background-color: #EAE8C8; text-decoration: none; overflow-x: none; overflow-y: auto; ">
<span>5 Textareas</span>
</a>
<a href="JavaScript: var file= 'getfiles/textareas.php?ta=10'; changeTa();" onmouseover="this.style.color = '#EAE8C8'; this.style.backgroundColor = '#7A1010'; " onmouseout="this.style.color = '#7A1010'; this.style.backgroundColor = '#EAE8C8';" style="float: left; padding: 0px 0px 0px 5px; display: block; text-align: left; width: 140px; height: 24px; color: #7A1010; background-color: #EAE8C8; text-decoration: none; overflow-x: none; overflow-y: auto; ">
<span>10 Textareas</span>
</a>
<a href="JavaScript: var file= 'getfiles/textareas.php?ta=20'; changeTa();" onmouseover="this.style.color = '#EAE8C8'; this.style.backgroundColor = '#7A1010'; " onmouseout="this.style.color = '#7A1010'; this.style.backgroundColor = '#EAE8C8';" style="float: left; padding: 0px 0px 0px 5px; display: block; text-align: left; width: 140px; height: 24px; color: #7A1010; background-color: #EAE8C8; text-decoration: none; overflow-x: none; overflow-y: auto; ">
<span>20 Textareas</span>
</a>
<a href="JavaScript: var file= 'getfiles/textareas.php?ta=all'; changeTa();" onmouseover="this.style.color = '#EAE8C8'; this.style.backgroundColor = '#7A1010'; " onmouseout="this.style.color = '#7A1010'; this.style.backgroundColor = '#EAE8C8';" style="float: left; padding: 0px 0px 0px 5px; display: block; text-align: left; width: 140px; height: 24px; color: #7A1010; background-color: #EAE8C8; text-decoration: none; overflow-x: none; overflow-y: auto; ">
<span>All Textareas</span>
</a>
</div>