IE8 Compatible Dropdown

dropdown.js

$(document).ready(function() {
  createDropDown();
  $(".dropdown dt a").click(function(e) {
  e.preventDefault();
  var dropdown_id = '#'+Page on parentelement.parentelement.id;
  $(dropdown_id + " ul").toggle();
  });
 
$(document).bind('click', function(e) {
  var $clicked = $(e.target);
  var $dropdowns = $(".dropdown");
  for (var i = 0; i <= $dropdowns.length; i++)
  {
    var dropdown = $dropdowns[i];
    var dropdown_id = '#'+Page on dropdown.id
    if (! $clicked.parents().is(dropdown_id))
    $(dropdown_id + " dd ul").hide();
  }
});

$(".dropdown dd ul li a").click(function(e) {
  e.preventDefault();
  var text = $(this).html();
  $(".dropdown dt a").html(text);
  $(".dropdown dd ul").hide();
  var dropdown_id = Page on e.target.id();
  var source_id = $($dropdown_id).parent().id();
  var source = $(source_id);
  source.val($(this).find("span.value").html())
  
});


function createDropDown(){
  var sources = $(".custom_dropdown");
  for (var i=0; i < sources.length; i++)
  {
    var source = sources[i];
    var options = source.children;
    var selected = source1;
    
    var targetID = "dropdown"+i;
    var parentID = Page on source.parentelement.id;
    
    $('#'+parentID).append('<dl id="'+targetID+'" class="dropdown"></dl>');
    
    var fullAppendString = '<dt><a href="#">' + selected.text +
    '<span class="value">' + selected.value +
    '</span></a></dt><dd><ul></ul></dd>'
    $('#'+targetID).append(fullAppendString);
    
    for (var j=0; j < options.length; j++)
    {
      var option = options[j];
      var appendString = '<li><a href="#">' +
      option.text + '<span class="value">' +
      option.value + '</span></a></li>'
      $('#'+targetID+" dd ul").append(appendString);
      
    }
    
  }
  
}
  
});

example.css

.custom_dropdown {
display: none;
}
 
.dropdown dd, .dropdown dt, .dropdown ul {
margin:0px;
padding:0px;
}
 
.dropdown dd {
position:relative;
}
 
.dropdown a, .dropdown a:visited {
color:#816c5b;
text-decoration:none;
outline:none;
}
 
.dropdown a:hover {
color:#5d4617;
width: 205px;
}
 
.dropdown dt a:hover {
color:#5d4617;
border: 1px solid #CB2E2B;
width:200px;
}
 
.dropdown dt a {
background:#FFFFFF url('../img/dropdown-arrow.png') no-repeat 90%;
display:block;
padding-right:30px;
    border:1px solid #EDEDED;
    width:200px;
    padding:5px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}
 
.dropdown dt a span {
cursor:pointer;
display:block;
}
 
.dropdown dd ul {
background:#FFFFFF;
border:1px solid #EDEDED;
color:#C5C0B0;
display:none;
left:0px;
padding:5px 0px; position:absolute; top:2px; width:auto;   
max-width: 215px;
list-style:none;}
 
.dropdown span.value {
display:none;
}
 
.dropdown dd ul li a {
padding:5px;
display:block;
}
 
.dropdown li {
max-height: 40px;
max-width: 215;
}
 
.dropdown dd ul li a:hover {
background-color:#CB2E2B;
color: #FFFFFF;
}
         
 
.dropdown img.flag {
border:none;
vertical-align:middle;
margin-left:10px;
}

example.html

<select class="custom_dropdown">
    <option selected="selected" value="Option1">Option 1</option>
    <option value="Option2">Option 2</option>
    <option value="Option3">Option 3</option>
</select>