Question

我在下拉菜单中使用此代码，由于某种原因无效。

.tabs__tabs ul {
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

.tabs__tabs li {
  float: left;
  margin: 0;
  text-align: center;
}

.tabs__tabs a {
  display: block;
  padding: 4px 15px;
  color: #8795ae;
  font-weight: bold;
  border-bottom: solid 3px #d5dae3;
  text-decoration: none;
  box-sizing: border-box;
  min-height: 55px;
}

.tabs__tabs a.on {
  color: #e84427;
  border-color: #e84427;
  text-decoration: none;
}

.tabs__content {
  display: none;
  float: left;
  width: 100%;
}

.tabs__content.on {
  display: block;
}

.tabs__content>.pad {
  padding: 10px 0;
}

.tabs__content>.block-wrap {
  padding: 10px 30px 30px;
}

.tabs--block .tabs__tabs ul {
  background: #2a4596;
  padding: 0 20px;
}

.tabs--block .tabs__tabs a {
  margin-right: 20px;
  padding: 5px 0;
  color: rgba(255, 255, 255, 0.56);
  border-color: #2a4596;
}

.tabs--block .tabs__tabs a.on {
  color: #fff;
  border-color: #e84427;
}

.tabs--block .tabs__content>.pad {
  padding: 10px 20px;
}

ul[data-tabs-count="1"] li {
  width: 100%
}

ul[data-tabs-count="2"] li {
  width: 50%
}

ul[data-tabs-count="3"] li {
  width: 33.3333333%
}

ul[data-tabs-count="4"] li {
  width: 25%
}

ul[data-tabs-count="5"] li {
  width: 20%
}

ul[data-tabs-count="6"] li {
  width: 16.666667%
}

ul[data-tabs-count="7"] li {
  width: 14.285714%
}

@media screen and (min-width:450px) {
  .tabs__tabs a {
    min-height: 0;
  }
}

.resp {
  display: none;
}

.resp.open {
  display: block
}

@media screen and (min-width:762px) {
  .resp--med {
    display: block;
  }
  .resp--med-i {
    display: inline;
  }
  .resp-hide--med {
    display: none;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="entry-nav tabs__tabs js-tabs resp resp--med">
  <!-- NOTE: Tabs count added as a data attribute, can be added via js if required and used to size correctly -->
  <ul data-tabs-count="3" role="tablist">
    <li role="presentation" style="position: relative;">
      <a href="#word" id="aTabEntryword_original" class="on eqh" data-toggle="tab" role="tab" aria-expanded="true" data-target-updtext="#word" style="min-height: 0px; visibility: hidden;">Test1</a><a href="#word" id="aTabEntryword" class="on" data-toggle="tab"
        role="tab" aria-expanded="true" data-target-updtext="#word" style="min-height: 0px; position: absolute; bottom: 0px; left: 0px; width: 100%; padding-bottom: 5px;">Test1</a>
    </li>
    <li role="presentation" style="position: relative;">
      <a href="#trans" id="aTabEntrytrans_original" data-toggle="tab" role="tab" aria-expanded="true" data-target-updtext="#trans" style="min-height: 0px; visibility: hidden;" class="eqh">Test2</a><a href="#trans" id="aTabEntrytrans" class="" data-toggle="tab"
        role="tab" aria-expanded="true" data-target-updtext="#trans" style="min-height: 0px; position: absolute; bottom: 0px; left: 0px; width: 100%; padding-bottom: 5px;">Test2</a>
    </li>
    <li role="presentation" class="dropdown" style="position: relative;">
      <a href="javascript:void(0)" id="aTabEntryeditor_original" data-toggle="dropdown" role="tab" aria-expanded="true" data-target-updtext="javascript:void(0)" style="min-height: 0px; visibility: hidden;" class="eqh">Test3</a>
      <a href="javascript:void(0)" id="aTabEntryeditor" class="" data-toggle="dropdown" role="tab" aria-expanded="true" data-target-updtext="javascript:void(0)" style="min-height: 0px; position: absolute; bottom: 0px; left: 0px; width: 100%; padding-bottom: 5px;">Test3<span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#editor">SubTest1</a></li>
        <li><a href="#editor2">SubTest1</a></li>
      </ul>
    </li>
  </ul>
</div>

选项卡Test3上的下拉菜单未显示。如果你使用光标到test2和test3，还有下划线。有人可以查看我的CSS代码并给我一些有用的建议吗？

Answer 1

如果你想使用bootstrap，你不需要使用javascript下拉菜单。

请点击此链接了解有关引导程序下拉菜单的更多信息。 https://getbootstrap.com/components/#navbar

你能用这个下拉菜单帮我吗？

1 个答案: