Cacher is the code snippet organizer for pro developers

<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" />

/* NOT NEEDED FOR DROPDOWNS */
body {font-family: 'Open Sans', sans-serif;}

.col1, .col2 {
  width: 48%;
  height: 100%;
  padding: 0 10px;
}
.col1 {
  background-color: #FFFFFF;
  float: left;
}
.col2 {
  background-color: #212325;
  color: #FFFFFF;
  float: right;
}

/* DROPDOWNS USING SELECT - BASE */
select {
  outline: none;
  -webkit-appearance: none;
  font: 14px 'Open Sans', sans-serif;
  cursor: pointer;
  color: #3C434A;
  border-color: #A6AFB7;
  min-width: 256px;
  padding: 8px 16px;
  border-radius: 3px;
  background: #FFFFFF url('http://i.imgur.com/hRbauFc.png') no-repeat scroll right center;
}
select:hover, select:active {
  border-color: #85929D;
}

/* DROPDOWNS USING JQUERY & UL - BASE */
.dropdown dd, .dropdown dt, .dropdown ul {
  margin: 0px;
  padding: 0px;
}
.dropdown dd {
  position: relative;
}
.dropdown dt a {
  background: #FFFFFF url('http://i.imgur.com/hRbauFc.png') no-repeat scroll right center;
  display: block;
  padding: 0;
  border: 1px solid #A6AFB7;
  border-radius: 3px;
  width: 254px;
  text-decoration: none;
  color: #3C434A;
}
.dropdown dt a span {
  cursor: pointer;
  display: block;
  padding: 7px 14px;
}
.dropdown dd ul {
  background: #EEF0F3 none repeat scroll 0 0;
  border: 1px solid #A6AFB7;
  border-radius: 0 0 3px 3px;
  display: none;
  list-style: none;
  padding: 5px 0px;
  position: absolute;
  left: 0px;
  top: -1px;
  width: 254px;
  min-width: 170px;
}
.dropdown span.value {
  display: none;
}
.dropdown dd ul li a {
  padding: 5px 14px;
  display: block;
  text-decoration: none;
  color: #3C434A;
}
.dropdown dd ul li a:hover {
  background-color: #008BE1;
  color: #FFFFFF;
}
.dropdown dt a:hover, .dropdown dt a:active {
  border-color: #85929D;
}

/* DROPDOWNS USING SELECT - DARK BASE */
select.dark {
  color: #FFFFFF;
  border-color: #677480;
  background: #677480 url('http://i.imgur.com/Z12IvtA.png') no-repeat scroll right center;
}
select.dark:hover, select.dark:active {
  border-color: #677480;
}

/* DROPDOWNS USING JQUERY & UL - DARK BASE */
.dropdown dt a.dark {
  background: #677480 url('http://i.imgur.com/Z12IvtA.png') no-repeat scroll right center;
  border: 1px solid #677480;
  color: #FFFFFF;
}
.dropdown dd ul.dark {
  background: #3C434A none repeat scroll 0 0;
  border: 1px solid #3C434A;
}
.dropdown dd ul.dark li a {
  color: #FFFFFF;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

$(".dropdown dt a").click(function() {
    $(".dropdown dd ul").toggle();
});
$(".dropdown dd ul li a").click(function() {
    var text = $(this).html();
    $(".dropdown dt a span").html(text);
    $(".dropdown dd ul").hide();
});
$(document).bind('click', function(e) {
    var $clicked = $(e.target);
    if (! $clicked.parents().hasClass("dropdown"))
        $(".dropdown dd ul").hide();
});

<div style="height: 100%; width: 100%;">
  <div class="col1">
  	<h1>Dropdowns - Light Theme</h1>
	<hr />
	<h2>Standard Dropdown using &lt;SELECT&gt;</h2>
	<select>
		<option value="Dropdown">Dropdown</option>
		<option value="Brazil">Brazil</option>
		<option value="France">France</option>
		<option value="Germany">Germany</option>
	  <option value="India">India</option>
	  <option value="Japan">Japan</option>
	  <option value="Serbia">Serbia</option>
	  <option value="UnitedKingdom">United Kingdom</option>
	  <option value="UnitedStates">United States</option>
	</select>
	<br />
	<h3>Non-WebKit Issue:</h3>
	<p>The &lt;SELECT&gt; tag will not accept any styling in non-WebKit browsers.  We have provided an alternative method below using &lt;UL&gt; and jQuery.</p>
	
	<hr />
	<h2>Dropdown using jQuery and &lt;UL&gt;</h2>
	<dl class="dropdown">
		<dt><a><span>Dropdown</span></a></dt>
			<dd>
				<ul>
					<li><a>Brazil</a></li>
					<li><a>France</a></li>
					<li><a>Germany</a></li>
					<li><a>India</a></li>
					<li><a>Japan</a></li>
					<li><a>Serbia</a></li>
					<li><a>United Kingdom</a></li>
					<li><a>United States</a></li>
				</ul>
			</dd>
	</dl>
	
	<!-- SPACING FOR DROPDOWN MENU --> 
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  </div>
  <div class="col2">
  	<h1>Dropdowns - Dark Theme</h1>
	<hr />
	<h2>Standard Dropdown using &lt;SELECT&gt;</h2>
	<select class="dark">
		<option value="Dropdown">Dropdown</option>
		<option value="Brazil">Brazil</option>
		<option value="France">France</option>
		<option value="Germany">Germany</option>
	  <option value="India">India</option>
	  <option value="Japan">Japan</option>
	  <option value="Serbia">Serbia</option>
	  <option value="UnitedKingdom">United Kingdom</option>
	  <option value="UnitedStates">United States</option>
	</select>
	<br />
	<h3>Non-WebKit Issue:</h3>
	<p>The &lt;SELECT&gt; tag will not accept any styling in non-WebKit browsers.  We have provided an alternative method below using &lt;UL&gt; and jQuery.</p>
	
	<hr />
	<h2>Dropdown using jQuery and &lt;UL&gt;</h2>
	<dl class="dropdown">
		<dt><a class="dark"><span>Dropdown</span></a></dt>
			<dd>
				<ul class="dark">
					<li><a>Brazil</a></li>
					<li><a>France</a></li>
					<li><a>Germany</a></li>
					<li><a>India</a></li>
					<li><a>Japan</a></li>
					<li><a>Serbia</a></li>
					<li><a>United Kingdom</a></li>
					<li><a>United States</a></li>
				</ul>
			</dd>
	</dl>
	
	<!-- SPACING FOR DROPDOWN MENU --> 
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  </div>
</div>