I have a html.dropdownlist on my webpage as follows:

<%=Html.DropDownList("MyDropDown", Model.Data, new { @class = "dropdown"})%>

I am populating the dropdown with ~80 items.

The issue is that when I click the dropdown the list of items is rendered from the top of the screen to the bottom of the screen.

How can I set up the dropdownlist so that it only displays a maximum of 20 items when the dropdown menu is clicked (i.e. user needs to scroll down to see items 21 - 80)?

I was anticipating (!) that there would be a html.dropdownlist property to control the number of displayed items that would allow something like the following e.g.:

<% =Html.DropDownList("MyDropDown", Model.Data, new { @class = "dropdown", rows ="20"}) %>

From research I have been doing on the msdn website it appears that there is no such property and that each browser has its own rules of how many items are displayed in a dropdownlist (?).

I am using IE6 and IE7.