在IE中自动打开下拉菜单

时间:2019-05-15 18:21:18

标签: html css internet-explorer bootstrap-4 cross-browser

我正在使用下拉菜单为客户创建登录页面。我正在使用引导程序。我一直有一个问题,其中下拉选项已在页面加载时扩展,但仅适用于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>

0 个答案:

没有答案