Resizable DropDownList

In this example, I will create a resizable DropDownList. The DropDownList control has a width property that is set to a fixed width. Using javascript, I am modifying the width of the DropDownList.
Inside the form tag,

<form id="form1" runat="server">
<asp:DropDownList ID="DropDownList1" runat="server" Width="50px">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
</asp:DropDownList>
</form>

I am adding a DropDownList with fixed width. Then in the Page_Load method,
protected void Page_Load(object sender, EventArgs e)
{
DropDownList1.Attributes.Add("onmouseover", "ddlMouseOver()");
DropDownList1.Attributes.Add("onmouseout", "ddlMouseOut()");
}

I am adding 2 attributes "onmouseover" and "onmouseout" javascript functions to the DropDownList In the actual javascript, I am changing the width of the control accordingly.

<script type="text/javascript">
function ddlMouseOver()
{
document.getElementById("<%= DropDownList1.ClientID %>").style.width = "200px";
}

function ddlMouseOut()
{
document.getElementById("<%= DropDownList1.ClientID %>").style.width = "50px";
}
</script>