Different dropdownlist component.

Answer 1

Firstly I would have the popout div fly above rather than below. The reason for this is that it will automatically be 'above' (in z-index terms) the elements above so it won't get covered up by successive table rows.

Secondly you will want to have something like this:

<div class="action">
   <div class="select"><!-- select box here --></div>
   <div class="popout"><!-- stuff here --></div>
</div>

Then activate it with CSS like this:

div.action {
   width:75px;
   height:30px;
   position:relative;
}
div.select {
   position:absolute;
   top:0;
   left:0;
}
div.popout {
   position:absolute;
   left:0;
   bottom:30px;
   width:300px;
   display:none; /* it will be revealed on hover */
}
div.action:hover div.popout {
   display:block;
}

To make this work in old versions of IE you can add this JavaScript to the action div:

<div class="action" onmouseover=""this.className='action hover'" onmouseout="this.className='action'">

Then use a class of hover instead of the state:

div.hover div.popout {
   display:block;
}

I hope that's what you meant! :)