Create Dropdownlist with jquery

<div id="SelectedCity" style="left:300px; padding-left:15px; padding-top:5px;background-image:url(../DropDown.jpg);  color: #8f8f8f; font-size: 16px; width: 340px;
        height: 25px">
        Select your city
    </div>
    <div id="Cities"  style=" left:300px; position: absolute; display:none; width: 350px; padding-top:25px; padding-bottom:5px; background-image:url(../List.jpg); height: 210px" >
    <ul style="width: 300px;  overflow:auto; margin-bottom:10px; height: 200px" >
        <li>Berlin</li>
        <li>Berlin</li>
        <li>Altrip</li>
        <li>Berlin</li>
        <li>Altrip</li>
        <li>Altrip</li>
        <li>Berlin</li>
        <li>Altrip</li>
        <li>Altrip</li>
        <li>Berlin</li>
        <li>Altrip</li>
        <li>Altrip</li>
        <li>Berlin</li>
        <li>Altrip</li>
        <li>Berlin</li>
        <li>Altrip</li>
        <li>Berlin</li>
        <li>Altrip</li>
        <li>Berlin</li>
        <li>Altrip</li>
    </ul>
    </div>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $("#SelectedCity").click(function (e) {
                e.stopPropagation();
                $("#tree").hide();
                $("#Cities").slideToggle("200");
            });

            $(document).click(function () {
                $("#tree").hide();
                $("#Cities").hide();

            });

            $(".toggle").click(function (e) {
                e.stopPropagation();
                $(this).next("ul").toggle();

            });

            $("#place").click(function (e) {
                e.stopPropagation();
                $("#tree").slideToggle("200");
                $("#Cities").hide();
            });


            $(".city").click(function () {
                $("#place").text($(this).text());
                $("#tree").hide();;
            });
        });
    </script>

    <div id="place"><label>hfosdfosj</label><div>select you place</div></div>
    <ul id="tree">
        <li><div class="toggle">shan dong</div>
            <ul>
                <li class="city">qu fu</li>
                <li class="city">qing dou</li>
            </ul>
           
        </li>
        <li><div class="toggle">he nan</div>
            <ul>
                <li class="city">zheng zhou</li>
                <li class="city">an yang</li>
            </ul>
        </li>
    </ul>


     <%--<div class="Box">--%>
<span class="uparrow"></span><br />
    <div class="dummyText">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae sapien
 non tortor volutpat fermentum in eu lacus. Cras volutpat luctus nisl id laoreet.
    </div>
    <span class="downarrow"></span>
</div>

    i am content
   

</asp:Content>

CSS file
.dummyText {
    margin: 10px;
    top: 20px;
}
.Box
{
    width: 300px;
    background-color: #666;
    border: 1px solid rgb(102, 102, 102);
    top: 30px;
    left: 10px;
}
.downarrow
{
    /*display: block;*/
    width: 0;
    height: 0;
    /*overflow: hidden;
    float: left;*/
    border: 25px solid transparent;
    border-bottom-width: 10;
    border-top: 25px solid #666;
    /* margin-left: 15px;
    margin-top: 0px; To compensate for box's border */
}
.uparrow
{
    /* display: block;*/
    width: 20px;
    height: 20px;
    /*overflow: hidden;
    float: right;*/
    border: 85px solid red;
    border-top: 5px solid #666;
    border-bottom: 56px solid #bababa;
    /*margin-left: 95px;
    margin-top: -35px;  To compensate for box's border */
 

  /* bottom: 10px;*/
}