Question

Bootstrap下拉导航无法正常工作。当有人点击图片但没有显示下拉列表时，我会使用下拉列表

我已经在自定义导航中进行了自定义导航，我已经将引导下拉

<ul class="topnav">
<li><a href="#">HIFZIL</a></li>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
     <li>
                        <a class="" href="#3"><span class="icon fontawesome-envelope scnd-font-color"></span>Messages</a>
                        <a class="header-menu-number" href="#4">5</a>
     </li>
    <li  class="navbar-right">

    <div class="dropdown">
  <button class="btn btn-default dropdown-toggle color" type="button" id="menu1" data-toggle="dropdown"><span class="caret"></span>  </button>
  <ul class="dropdown-menu color" role="menu" aria-labelledby="menu1">
    <li role="presentation"><a role="menuitem" href="#">HTML</a></li>
  </ul>
</div>


    </li>



    <li  class="navbar-right"><a href="#"><span class="glyphicon glyphicon-log-in"></span></a></li>

  <li class="icon">
    <a href="javascript:void(0);" style="font-size:25px;" onClick="myFunction()" class="fa fa-align-justify fa-4x"></a>
  </li>
</ul>

这是自定义导航的CSS

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #147cc4;
}

ul.topnav li {float: left;}

ul.topnav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}
ul.topnav li.icon {display: none;}

Answer 1

删除ul.topnav {overflow：hidden}

下拉列表可能不在容器中，因为隐藏了该规则。

导航中的Bootstrap下拉列表无法正常工作

1 个答案: