我正在使用下拉菜单为客户创建登录页面。我正在使用引导程序。我一直有一个问题,其中下拉选项已在页面加载时扩展,但仅适用于IE。它们也没有“展开”下拉菜单的任何常规格式(背景色应该是白色,不是。等等)。相反,所有li都是半透明的灰色。这些选项是可悬停且可选的,但下拉菜单不会关闭(插入符号本质上无响应)。
此问题之前在同一站点的其他站点上已经发生过。过去最奇怪的是,我仅通过将文件夹再次上载到客户端的服务器就能够使它正常工作。相同的代码,一次不起作用,然后再次上传然后起作用。对于我的一生,我不知道为什么会这样
.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>