大佬教程收集整理的这篇文章主要介绍了html – 引导程序移动菜单100％，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
这是HTML
.navbar-collapse { height: 100vh; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/"><img src="~/Images/logo.png" class="img-responsive" /></a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option</a> <div class="dropdown-menu dropdown-communities" role="menu"> <div class="row current-communities"> <div class="col-md-4"> <h4>Option</h4> <ul> <li><a href="/Link/">Link</a></li> </ul> </div> <div class="col-md-4"> <h4>Option</h4> <ul> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> </ul> </div> <div class="col-md-4"> <h4>Option</h4> <ul> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> </ul> </div> </div> <hr class="current-communities-hr" /> <div class="row upcoming-communities"> <div class="col-md-4"> <h4>Option</h4> <ul> <li><a href="/Link/">Link</a></li> </ul> </div> <div class="col-md-4"> <h4>Option</h4> <ul> <li><a href="/Link/">Link</a></li> </ul> </div> <div class="col-md-4"> <h4>Option</h4> <ul> <li><a href="/Link/">Link</a></li> </ul> </div> </div> </div> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option</a> <ul class="dropdown-menu" role="menu"> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option</a> <ul class="dropdown-menu" role="menu"> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option</a> <ul class="dropdown-menu" role="menu"> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> </ul> </li> </ul> </div> </div> </div>
我尝试过以下方法：
.navbar-collapse { height: 100vh; }
但是当第一个打开时,我仍然无法进入最后一个下拉菜单.
.dropdown-menu{ position:relative; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <style> .navbar-collapse { height: calc(100vh - 50pX); } </style> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/"><img src="~/Images/logo.png" class="img-responsive" /></a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 1</a> <div class="dropdown-menu dropdown-communities" role="menu"> <div class="row current-communities"> <div class="col-md-4"> <h4>Option</h4> <ul> <li><a href="/Link/">Link</a></li> </ul> </div> <div class="col-md-4"> <h4>Option</h4> <ul> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> </ul> </div> <div class="col-md-4"> <h4>Option</h4> <ul> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> </ul> </div> </div> <hr class="current-communities-hr" /> <div class="row upcoming-communities"> <div class="col-md-4"> <h4>Option</h4> <ul> <li><a href="/Link/">Link</a></li> </ul> </div> <div class="col-md-4"> <h4>Option</h4> <ul> <li><a href="/Link/">Link</a></li> </ul> </div> <div class="col-md-4"> <h4>Option</h4> <ul> <li><a href="/Link/">Link</a></li> </ul> </div> </div> </div> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 2</a> <ul class="dropdown-menu" role="menu"> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 3</a> <ul class="dropdown-menu" role="menu"> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 4</a> <ul class="dropdown-menu" role="menu"> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> </ul> </li> </ul> </div> </div> </div>
以上是大佬教程为你收集整理的html – 引导程序移动菜单100％全部内容，希望文章能够帮你解决html – 引导程序移动菜单100％所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。