(function( $ ) {    
  $.fn.fancySelect = function(sel) {         
    var saved_value     = $('.fancyselect-selected li', this);
    var list            = $('.fancyselect-list', this);
    var list_element    = $('.fancyselect-list li', this);
    var selected_element= $('.fancyselect-list .selected', this);
    var obj_container   = $(this);
    var name            = this.attr('id');
    var selected        = sel ? sel : '';
 
    //sets the width of the list, if the LI is biggest, use that 
    var max_width       = 0;    
    var saved_width     = saved_value.outerWidth();
    var list_width      = list_element.outerWidth();  
    if(saved_width > list_width) max_width = saved_width;    
    else max_width = list_width;
 
    // creating the menu and junk
    $('.fancyselect-selected', this).width(max_width);        
    $('.fancyselect-list', this).width(max_width);
    $('.fancyselect-list', this).hide();
    obj_container.append('');
 
    // simulating optgroup, if the class is group it can't be selected
    $('.fancyselect-list .group').unbind('click');    
 
    //saves title to data and removes title attr so it doesn't show 
    list_element.hover(function() {
        if($(this).attr('title')) $(this).data('title', $(this).attr('title')).removeAttr('title');
    });
 
    // clicking the saved value at the top opens the option list (html select)
    saved_value.click(function() {
        list.slideToggle('fast');
    });     
 
    // clicking a list element (html option)
    list_element.click(function() {
        var data_text = $(this).text();
        var data_title = $(this).data('title') ? $(this).data('title') : '';
        var data_out = '';
 
        if(data_title.length > 0) data_out = data_title;
        else data_out = data_text;
 
        $('#form_'+name).val(data_out);
        saved_value.html(data_text);
 
        list_element.removeClass('selected');
        $(this).addClass('selected');
 
        list.slideToggle('fast');
 
    });
 
    //searching through options to find selected, repeated code but whatever.
    if(selected.length > 0) {
        list_element.each(function(){
            var opt_text = $(this).text();
            var opt_title = $(this).attr('title') ? $(this).attr('title') : '';            
            var opt_out = '';
 
            if(opt_title.length > 0) opt_out = opt_title;
            else opt_out = opt_text;            
 
            if(selected == $.trim(opt_out)) {
                $('#form_'+name).val(opt_out);
                saved_value.html(opt_text);
 
                list_element.removeClass('selected');
                $(this).addClass('selected');                
            }
        });
    }
 
  };
})( jQuery );

.fancyselect-selected { border: 1px solid #ccc; background: #999; background: url(images/select_bg.png) repeat-x; height: 25px; }
.fancyselect-selected li { padding: 5px 25px 5px 5px; cursor: pointer; background: url(images/select-arrow-down.png) top right no-repeat; }  /* arrow bg */
.fancyselect-list { border: 1px solid #ccc; background: #fff; position: absolute;   }
.fancyselect-list li { padding: 5px 25px 5px 5px; cursor: pointer; }
.fancyselect-list li:hover { background: #e9e9e9; }
.fancyselect-list .selected, 
.fancyselect-list .selected:hover { background: #e9e9e9; color: #FFF; }
.fancyselect-list .group { font-weight: bold; cursor: default; }
.fancyselect-list .group:hover { background: #fff; }
 
#my-select-list { white-space:nowrap; box-shadow: 0px 3px 3px #ccc; margin-bottom: 10px; float: left; width: 225px; }
#my-select-list  a { text-decoration: none; }
#my-select-list  a:link, 
#my-select-list  a:hover, 
#my-select-list  a:visited {color: #000; }

  <div id="my-select-list">    
    <div>
      <ul>
        <li>Choose an option</li>
      </ul>
    </div>
    <div>
        <ul>
          <li title="">Option group</li>
          <li>Option 1</li>
          <li>Option 2</li>
          <li title="definitely not 3">Option 3</li>
          <li title="might be 4">Option 4</li>
          <li>Option 5</li>
          <li>Option 6</li>
        </ul>
    </div>  
  </div>

<script type="text/javascript">
$(document).ready(function() {
     $('#my-select-list').fancySelect();
     // or call it out pre selecting a default value
     //$('#my-select-list').fancySelect('Option 5');});
</script>