Most hardest thing is to change the default view of the DropDown LIst. here is the simple CSS for that

<style type="text/css"> 
.select {
  -webkit-appearance: button;
  -webkit-border-radius: 2px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-padding-end: 20px;
  -webkit-padding-start: 2px;
  -webkit-user-select: none;
  background-image: url(images/arrow.png),
    -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
  background-position: center right;
  background-repeat: no-repeat;
  border: 1px solid #AAA;
  color: #555;
  font-size: inherit;
  margin: 0;
  overflow: hidden;
  padding-top: 2px;
  padding-bottom: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;}
</style>
.----------------------------




  <asp:DropDownList ID="DropDownList1" runat="server"  CssClass="select"    Width="150px">
        <asp:ListItem>manja</asp:ListItem>
         <asp:ListItem>manja1</asp:ListItem>
          <asp:ListItem>manja2</asp:ListItem>
           <asp:ListItem>manja3</asp:ListItem>
        </asp:DropDownList>



    thats it .............. joy......