Problem with onMouseOut event with select box options (IE)

Question

Hello All,

The problem I am facing with below code is that whenever I try to select any option from the select box, the mouseout event executed (in IE, Mozilla doing gr8) and option disappear. How can one get over this bug.

<select name="ed" id="ed" dir="ltr"  style="width:200px;overflow:hidden;" onMouseOver="this.style.width='auto'" onMouseOut="this.style.width='200px';">
      <option value="1" selected="selected">click here</option>
      <option value="1">Samuel Jackson</option>
      <option value="2">David Nalog</option>
      <option value="3">This one is a real real big name</option>
 </select>

Answer 1

I changed the code do it conditionally. Now it is working fine. Check it.

<select name="ed" id="ed" dir="ltr"  style="width:200px;overflow:hidden;" 
        OnMouseOver="this.style.width='auto';" onmouseout="if(!this.focussed) {this.style.width='200px';}"  onfocus="this.focussed=true;" onblur="this.style.width='200px';this.focussed=false;" >
      <option value="1" selected="selected">click here</option>
      <option value="1">Samuel Jackson</option>
      <option value="2">David Nalog</option>
      <option value="3">This one is a real real big name</option>
     </select>