Expand (Open) DropDownList on Focus using jQuery and CSS in ASP.Net

Hi JennyD6856,

Check this example. Now please take its reference and correct your code.

HTML

<style type="text/css">
    select
    {
        margin-top: 0;
        position: static;
        border-collapse: separate;
        cursor: pointer;
        vertical-align: middle;
        max-width: 100%;
        outline: medium none;
        display: block;
        background: none repeat scroll 0 0 #FFFFFF;
        border: 1px solid #CCCCCC;
        border-radius: 2px 2px 2px 2px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
        color: black;
        letter-spacing: 0.1em;
        margin-bottom: 5px;
        padding: 4.8px 4px;
    }
    select:focus
    {
        outline: thin dotted #333333;
        outline-offset: -2px;
    }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        fixSelect($("#DropDownList2"));
        //            $("#DropDownList2").change(function () {
        //                //$(this).attr('size', 1);
        //            });
    });

    function fixSelect(selectList) {
        for (var i = 0; i != selectList.length; i++) {
            setActions(selectList[i]);
        }
    }

    function setActions(select) {
        $(select).click(function () {
            if (select.getElementsByTagName("option").length == 1) {
                active(select);
            }
        });
        $(select).focus(function () {
            active(select);
        });
        $(select).blur(function () {
            inaktiv(select);
        });
        $(select).keypress(function (e) {
            if (e.which == 13) {
                inaktiv(select);
            }
        });
        var optionList = select.getElementsByTagName("option");

        for (var i = 0; i != optionList.length; i++) {
            setActionOnOption(optionList[i], select);
        }
    }
    function setActionOnOption(option, select) {
        $(option).click(function () {
            inaktiv(select);
        });
    }
    function active(select) {
        var temp = $('<select/>');
        $('<option />', { value: 1, text: $(select).find(':selected').text() }).appendTo(temp);
        $(temp).insertBefore($(select));

        $(select).attr('size', select.getElementsByTagName('option').length);
        $(select).css('position', 'absolute');
        $(select).css('margin-top', '-6px');
        $(select).css({ boxShadow: '2px 3px 4px #888888' });
    }
    function inaktiv(select) {
        if ($(select).parent().children('select').length != 1) {
            select.parentNode.removeChild($(select).parent().children('select').get(0));
        }
        $(select).attr('size', 1);
        $(select).css('position', 'static');
        $(select).css({ boxShadow: '' });
        $(select).css('margin-top', '0px');
    }
</script>
<asp:Label ID="Label1" runat="server" Text="Name"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server" TabIndex="1">
</asp:TextBox>
<br />
<br />
<asp:Label ID="Label3" runat="server" Text="Gender"></asp:Label>
<asp:DropDownList ID="DropDownList2" TabIndex="2" runat="server">
    <asp:ListItem Value="">Select one</asp:ListItem>
    <asp:ListItem Value="1">Item 1</asp:ListItem>
    <asp:ListItem Value="2">Item 2</asp:ListItem>
    <asp:ListItem Value="3">Item 3</asp:ListItem>
    <asp:ListItem Value="4">Item 4</asp:ListItem>
    <asp:ListItem Value="5">Item 5</asp:ListItem>
    <asp:ListItem Value="6">Item 6</asp:ListItem>
</asp:DropDownList>

Screenshot