Question

在开始之前，如果这是一个愚蠢的问题，我道歉。我们一直在为我们的网站寻找一个大型菜单，并找到了这个代码： https://bootsnipp.com/snippets/featured/bootstrap-mega-menu

编辑似乎很容易，所以我开始进行更改，并提出了这个问题：

<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--<a class="navbar-brand" href="#">MegaMenu</a>-->
</div>


<!-- OPEN -->
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">

<li class="dropdown mega-dropdown float-button"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Holidays <span class="glyphicon glyphicon-chevron-down pull-right"></span></a>

<ul class="dropdown-menu mega-dropdown-menu row">

<li class="col-sm-3">
<ul>
<li class="dropdown-header">Destination 1</li> 
<li class="dropdown-listing"><a href="#">Choice 1</a></li>
<li class="dropdown-listing"><a href="#">Choice 2</a></li>
<li class="divider"></li>
<li class="dropdown-header">Destination 2</li>
<li class="dropdown-listing"><a href="#">Choice 1</a></li>
<li class="dropdown-listing"><a href="#">Choice 2</a></li>
</ul>   
</li>

<li class="col-sm-3">
<ul>
<li class="dropdown-header">Destination 3</li>
<li class="dropdown-listing"><a href="#">Choice 1</a></li>
<li class="dropdown-listing"><a href="#">Choice 2</a></li>
<li class="divider"></li>
</ul>
</li>

<li class="col-sm-3">
<ul>
<li class="dropdown-header">Destination 4</li>
<li class="dropdown-listing"><a href="#">Choice 1</a></li>
<li class="dropdown-listing"><a href="#">Choice 2</a></li>

</ul>
</li>

<li class="col-sm-3">
<ul>  
<li class="dropdown-header">Destination 5</li>
<li class="dropdown-listing"><a href="#">Choice 1</a></li>
<li class="dropdown-listing"><a href="#">Choice 2</a></li>
<li class="dropdown-listing"><a href="#">Choice 3</a></li>
<li class="dropdown-listing"><a href="#">Choice 4</a></li>
<li class="dropdown-listing"><a href="#">Choice 5</a></li>    
</ul>      
</li>

</ul>
</li>

<!-- CLOSE  --> 

</div>
<!-- /.nav-collapse -->
</nav>
</div>

似乎工作得很好但是我想在导航栏中添加第二个下拉菜单，这就是事情开始出错的地方。我复制了这部分代码：

<!-- OPEN -->
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">

<li class="dropdown mega-dropdown float-button"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Holidays <span class="glyphicon glyphicon-chevron-down pull-right"></span></a>

<ul class="dropdown-menu mega-dropdown-menu row">

<li class="col-sm-3">
<ul>
<li class="dropdown-header">Destination 1</li> 
<li class="dropdown-listing"><a href="#">Choice 1</a></li>
<li class="dropdown-listing"><a href="#">Choice 2</a></li>
<li class="divider"></li>
<li class="dropdown-header">Destination 2</li>
<li class="dropdown-listing"><a href="#">Choice 1</a></li>
<li class="dropdown-listing"><a href="#">Choice 2</a></li>
</ul>   
</li>

<li class="col-sm-3">
<ul>
<li class="dropdown-header">Destination 3</li>
<li class="dropdown-listing"><a href="#">Choice 1</a></li>
<li class="dropdown-listing"><a href="#">Choice 2</a></li>
<li class="divider"></li>
</ul>
</li>

<li class="col-sm-3">
<ul>
<li class="dropdown-header">Destination 4</li>
<li class="dropdown-listing"><a href="#">Choice 1</a></li>
<li class="dropdown-listing"><a href="#">Choice 2</a></li>

</ul>
</li>

<li class="col-sm-3">
<ul>  
<li class="dropdown-header">Destination 5</li>
<li class="dropdown-listing"><a href="#">Choice 1</a></li>
<li class="dropdown-listing"><a href="#">Choice 2</a></li>
<li class="dropdown-listing"><a href="#">Choice 3</a></li>
<li class="dropdown-listing"><a href="#">Choice 4</a></li>
<li class="dropdown-listing"><a href="#">Choice 5</a></li>    
</ul>      
</li>

</ul>
</li>

<!-- CLOSE  -->

直接粘贴在下面。它创建了另一个工作菜单，但它位于第一个下方而不是正如我预期的那样。我究竟做错了什么？我不希望他们在没有倒塌时并排坐着。

新鲜的眼睛和任何帮助将不胜感激。

Answer 1

我希望你想要这个https://bootsnipp.com/user/snippets/Al77D

.mega-dropdown {
  position: static !important;
  width: 100%;
}

将此更改为

.mega-dropdown {
  position: static !important;
}

只需删除导致第一个菜单占据整个宽度的width:100%;

在Bootstrap导航栏

1 个答案: