Javascript: Auto-Expand a form's select box on hover/mouseover

Productivity is all about cutting down mouse clicks. With this in mind, I've written this function to open/close a html dropdown menu on mouseover/out. It's currently more of an idea than a usable function, so it might need some testing & tweaking to work cross browser in a real web environment but the basic principal is here to get you started.
Try a demo »


The Function: Please see right hand pane>

function toggleSelectBox(selbox){ 
 if(selbox.size>1){//HIDE:
  selbox.size=1;
  selbox.style.position='static';
 }else{//SHOW:
  selbox.size = selbox.options.length;
  selbox.style.position='absolute';
  selbox.style.height='auto';
 }
}

<select id="type" name="type" onmouseout="toggleSelectBox(this)" onmouseover="toggleSelectBox(this)">
<option value="">opt1</option>
<option value="">opt2</option>
<option value="">opt3</option>
</select>