Making a drop-down menu with Css+jquery

Html

<p id= "Select_box" >    <dl id= "Types" >        <dt><span id= "Select_type" > Please select </span> </dt>        <dd> Department Stores </dd>        <dd> daily necessities </dd>        <dd> computer Peripherals </dd>        <DD > Digital Products </dd>    </dl></p>

Css

a{        Text-decoration:none;} #select_box {        position:relative;        top:10px;        left:0px;        Display:inline-block;        width:192px;} #select_box dl{        float:left;        width:192px;        height:32px;        Background: #FFFFFF;        Cursor:pointer;        z-index:100;} #select_box DL dt{        width:172px;        height:32px;        line-height:34px;        Font-size:1em;        Color: #fff;        Background:url (.. /img/select_bg.png) No-repeat center right;        Background-color:rgb (60,179,113);        margin:0;        padding-left:20px;} #select_box DL dd{        position:relative;        Left: -40px;        width:172px;        height:32px;        line-height:32px;        Font-size:. 9em;        Color: #FFFFFF;        Background: #2A8F57;        padding-left:20px;        Z-index:10;}

Jquery

$ (function () {                $ ("#types dd"). Hide ();                $ ("#select_box"). Toggle (function () {                    $ ("#types DD"). Stop (True,false). Slidedown ($);                },function () {                    $ ("#types DD"). Stop (True,false). Slideup ();                });                $ ("#types DD"). Click (function () {                    var type_val=$ (this). html ();                    $ ("#types DT"). HTML (type_val);                    $ ("#types DD"). Stop (True,false). Slideup ();})            

If you are using as a Select component, you can add form forms and hidden fields (type= "hidden"), use jquery to control write values to input, or control form form submissions.