populated dropdownList selected value is not pick the hover value

<pre lang="css">populated dropdownList selected value is not pick the hover value. Please anybody send any solutions and immediately, thank you

Default.aspx
                &lt;li class=&quot;form-line&quot; id=&quot;id_26&quot;&gt;
                    &amp;lt;label class=&quot;form-label-left&quot; id=&quot;ddProducts1&quot; for=&quot;input_26&quot;&gt;
                        Product
                    &amp;lt;/label&gt;
                &lt;div id=&quot;cid_26&quot; class=&quot;form-input&quot;&gt;           &lt;%--style=&quot;left:170px;top:100px;position:absolute&quot; class=&quot;dlist&quot; --%&gt;
                      &amp;lt;label class=&quot;dlist&quot;&gt;
                          &lt;asp:DropDownList ID=&quot;ddProducts&quot; CssClass=&quot;dropdown&quot; runat=&quot;server&quot; DataSourceID=&quot;sqlproducts&quot;
                                DataTextField=&quot;Product&quot; DataValueField=&quot;Product&quot;&gt;
                            &lt;/asp:DropDownList&gt;
                      &amp;lt;/label&gt;
                 &lt;asp:SqlDataSource ID=&quot;sqlproducts&quot; runat=&quot;server&quot; ConnectionString=&quot;&lt;%$ ConnectionStrings:pmdb %&gt;&quot;
                      SelectCommand=&quot;select 'Type product code' as 'Product' union all select stockCode as 'Product' from productCodes where stockcode like 'AV%' OR stockcode like 'SL%' &quot;&gt;
                 &lt;/asp:SqlDataSource&gt;
                &lt;/div&gt;
                &lt;/li&gt;


style.css

.dropdown{
     padding:0px;           /*-5px 0px 10px 0px;*/
     margin: 0;
    -webkit-border-radius: 4px #EFEFEF;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    background-color: #fff;
    /*color: #888;*/
    border: 1px solid #ccc;
    outline: none;
    display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    height: 30px;
}

.dropdown select option{
    padding:3px 5px;
    color:aqua;
    background-color:#ffd800;
         padding:-5px 0px 10px 0px;
}


.form-input .form-error-message, .form-input-wide .form-error-message{
    bottom:-5px;
    font-size:11px;
    position:relative;
    z-index:900;
    right:auto;
    top:auto;
    color:#333;
    padding:3px;
    max-width:100%;
    padding-bottom:3px;
    font-size:12px;
    border:none;
    -moz-box-shadow:0px 2px 4px rgba(102, 102, 102, 0.5);
    -webkit-box-shadow:0px 2px 4px rgba(102, 102, 102, 0.5);
    -moz-border-radius:6px 6px;
    -webkit-border-radius:6px 6px;
    box-shadow:0px 2px 4px rgba(102, 102, 102, 0.5);
    border-radius:6px 6px;
    background:#FFCCCC;
}

.form-line {
    clear:both;
    padding:10px;
    margin:0px;
    /* Changed display to block to prevent a bug in Chrome */
    display:block;
    width:97%;
    width:-moz-available;
    /* Removed this because it was changing the size of the migrated forms */
    /* border:1px solid transparent ; */
    position:relative;
}

.form-line-column{
    float:left;
    clear:none;
    width:auto;
    white-space:nowrap;
}
/* Added css rule below to retain display:inline-block for shrunken fields */
.form-line.form-line-column {
    display:inline-block;
}

.form-line-column-clear{
    clear:left;
    width:auto;
}

.dlist {
    position: relative;
}

    .dlist:after {
        /*content: '&gt;';*/
        font: 14px &quot;Consolas&quot;, monospace;
        color: #0081C7;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        right: 8px;
        top: -3px;
        border-bottom: 1px solid #ddd;
        position: absolute;
        pointer-events: none;
    }

    .dlist:before {
        /*content: '';*/
        right: 6px;
        top: -3px;
        width: 20px;
        height: 20px;
        background: #f8f8f8;
        position: absolute;
        pointer-events: none;
        display: block;
    }
.form-input {
   display:inline-block;
}</pre>