Dropdown Menu Automatically Open in IE - html

Question

I'm making a landing page for a client with a dropdown menu. I'm using bootstrap. I've been having an issue where the dropdown options are already expanded on page load, but only for IE. They also do not have any of the normal formattings for an 'expanded' dropdown (background color should be white, it's not, etc.) Instead, all the li are translucent gray. The options are hoverable and selectable, but the dropdown menu will not close (the caret is essentially unresponsive).
This problem has happened before, on other sites, for this same client. The weirdest thing is, in the past, I have been able to get it to work by merely uploading the folder again to the client's servers. Same code, not working once, then uploaded again and then working. For the life of me, I can't figure out why this is happening
.hero .hero-selection select {
width: 250px;
border: none;
font-size: 14px;
font-family: Proxima Nova Thin;
-moz-box-shadow: 0 0 0 35px rgba(255, 255, 255, .2);
-webkit-box-shadow: 0 0 0 35px rgba(255, 255, 255, .2);
box-shadow: 0 0 0 35px rgba(255, 255, 255, .2);
background-color: #FFF;
color: #999;
border-radius: 0!important;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
padding: 15px 10px 10px;
}
.hero .hero-form-container .dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 4px;
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
margin: 2px 0 0;
padding: 5px 0;
}
.hero .hero-form-container .dropdown-menu>li>a {
display: block;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
padding: 3px 20px;
}
.hero .hero-form-container ul {
width: 250px;
top: 91px;
border-radius: 0;
border: none;
background-color: #FFF;
color: #999;
padding: 0;
}
.hero .hero-form-container ul li a:hover {
background-color: #99d425;
font-family: Proxima Nova Thin;
font-size: 14px;
color: #999;
padding: 5px 5px 5px 15px;
}
.hero .hero-form-container ul li a {
font-family: 'Proxima Nova Thin';
font-size: 14px;
color: #999;
text-decoration: none;
padding: 5px 5px 5px 15px;
}
<div class="row">
<div class="col-sm-6 pull-left"><img id="nats-logo" style="" src="img/nats-logo-red.png" alt=""></div>
<div class="col-sm-6">
<div class="hero">
<div class="hero-form">
<div class="dropdown hero-selection">
<h5>Select your utility below:</h5>
<h2 style="margin-top: 20px">My Electricity Utility is:</h2>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true"> Select One<span class="caret"></span> </button>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" value="notlisted" class="is-active">[not listed]</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" value="EBG">BGE</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" value="CNM">Delmarva Power (MD)</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" value="PED">Pepco (DC)</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" value="PEM">Pepco (MD)</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" value="APM">Potomac Edison</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" value="SME">SMECO</a></li>
</ul>
</div>
<form action="https://one.wglenergy.com/portal/rc_engine_by_ldc.php" id="form1">
<input type="hidden" name="super_rc" value="NATS">
<input type="hidden" name="cust_type" value="RES">
<input type="hidden" name="ldc_g" id="ldc_g">
<input type="hidden" name="ldc_e" id="ldc_e">
<input type="submit" id="go-button" value="See Your Pricing">
</form>
</div>
</div>
</div>
</div>
</div>