分类导航

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – Bootstrap 4下拉菜单出现在其他元素后面，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我在bootstrap 4下拉菜单中遇到问题,如果有足够的空间并且从下到上打开下拉列表,则所有菜单都显示正常,但如果菜单从上到下打开,则某些菜单项会出现在其他div后面.我该如何解决这个问题以及为什么只在某种情况下才会发生？我尝试了位置相对和z-index,但它不起作用.

这是简化的代码：

$(document).ready(function() {
    $('.container').hover(function() {
        if (!$(this).find('.card').hasClass('flipped')) {
            $(this).find('.card').toggleClass('flipped')
        }
        $(this).find('.card').addClass('hovered');
    },function() {
        var val = $(this).find('.card');
        $(this).find('.card').removeClass('hovered');
        setTimeout(function() {
            if (!val.hasClass('hovered')) {
                val.removeClass('flipped')
            }
        },1000);
    });

});

.dropdown{
    width: 100% !important;
    margin-top: 30% !important;
}
.dropdown a{
    width: 100% !important;
}
.dropdown-item{
    color: black !important;
}
.dropdown-menu{
    height: auto !important;
}

.container {
  width: 150px !important;
  height: 150px;
  float: left;
  position: relative;
  margin: 3% 2.25% 0 2.25%;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
}


.card {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: right center;
  -moz-transform-origin: right center;
  -o-transform-origin: right center;
  transform-origin: right center;
}

.card.flipped {
  -webkit-transform: translateX( -100%) rotateY( -180deg);
  -moz-transform: translateX( -100%) rotateY( -180deg);
  -o-transform: translateX( -100%) rotateY( -180deg);
  transform: translateX( -100%) rotateY( -180deg);
}

.card div {
  height: 100%;
  width: 100%;
  color: white;
  text-align: center;
  font-weight: bold;
  position: absolute;
  -webkit-BACkface-visibility: hidden;
  -moz-BACkface-visibility: hidden;
  -o-BACkface-visibility: hidden;
  BACkface-visibility: hidden;
  cursor: pointer;
}

.card .front {
  BACkground: red;
  display: flex;
  justify-content: center;
  align-items: center;
}


.card .BACk {
  BACkground: blue;
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudFlare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<div id="main"><br>

<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="BACk">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-priMary dropdown-toggle" href="#" role="button" id="dropdownMenuLink1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink1">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="BACk">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-priMary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>


<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="BACk">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-priMary dropdown-toggle" href="#" role="button" id="dropdownMenuLink3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink3">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>


<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="BACk">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-priMary dropdown-toggle" href="#" role="button" id="dropdownMenuLink4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink4">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>



<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="BACk">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-priMary dropdown-toggle" href="#" role="button" id="dropdownMenuLink5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink5">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>



<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="BACk">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-priMary dropdown-toggle" href="#" role="button" id="dropdownMenuLink6" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink6">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="BACk">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-priMary dropdown-toggle" href="#" role="button" id="dropdownMenuLink7" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink7">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="BACk">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-priMary dropdown-toggle" href="#" role="button" id="dropdownMenuLink8" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink8">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

</div>

解决方法

更新的答案(基于赏金请求)

问题是变换风格：preserve-3d;在.card上打破了下拉列表中的z顺序.当popper.js动态定位下拉列表时,它会将translate3d(x,x,0)CSS添加到下拉列表中.

由于z顺序设置为0,因此所有其他具有变换样式的卡都会隐藏下拉列表：preserve-3d;用于翻转动画.为了使下拉菜单具有正确的z顺序,它还必须与translate3d一起定位…

.dropdown {
   margin-top: 30%;
   transform-style: preserve-3d;
   transform: translate3d(0,10pX) !important;
}

.dropdown-menu{
    height: auto !important;
    position: relative !important;
    transform: translate3d(0,10pX) !important;
}

此外,除非父元素也具有transform-style,否则z-order将无法使用translate3d：preserve-3d;.所以,在这种情况下,transform-style：preserve-3d;必须添加到所有父元素(#main,.container,.BACk,.test和.dropdown)..

Working Demo on Codeply

原始答案

z指数：99999！重要;在所有.dropdown上导致下一行覆盖上一行的下拉列表.删除z-index …

.dropdown{
    width: 100%;
    margin-top: 30%;
}

下拉列表的定位现在由popper.js控制,它会做一些意想不到的事情.尝试使用data-flip =“false”来防止下拉列表覆盖它自己的按钮.

https://www.codeply.com/go/R0ePzWnvPC

.test{
    width: 150px;
    height: 150px;
    margin: 3% 2.25% 0 2.25%;
    float: left;
    BACkground-color: lightgrey;
    position: relative;
    perspective: 800;
}
.dropdown{
    width: 100% !important;
    margin-top: 30% !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudFlare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="test">
   <div class="dropdown">
      <a title="Tu Voto" data-flip="false" class="btn btn-priMary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
         <a class="dropdown-item"><span>Test Dropdown 2</span></a>
         <a class="dropdown-item"><span>Test Dropdown 3</span></a>
         <a class="dropdown-item"><span>Test Dropdown 4</span></a>
         <a class="dropdown-item"><span>Test Dropdown 5</span></a>
         <a class="dropdown-item"><span>Test Dropdown 6</span></a>
         <a class="dropdown-item"><span>Test Dropdown 7</span></a>
         <a class="dropdown-item"><span>Test Dropdown 8</span></a>
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
      </div>
   </div>
</div>

<div class="test">
   <div class="dropdown">
      <a title="Tu Voto" data-flip="false" class="btn btn-priMary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
         <a class="dropdown-item"><span>Test Dropdown 2</span></a>
         <a class="dropdown-item"><span>Test Dropdown 3</span></a>
         <a class="dropdown-item"><span>Test Dropdown 4</span></a>
         <a class="dropdown-item"><span>Test Dropdown 5</span></a>
         <a class="dropdown-item"><span>Test Dropdown 6</span></a>
         <a class="dropdown-item"><span>Test Dropdown 7</span></a>
         <a class="dropdown-item"><span>Test Dropdown 8</span></a>
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
      </div>
   </div>
</div>
<div class="test">
   <div class="dropdown">
      <a title="Tu Voto" data-flip="false" class="btn btn-priMary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
         <a class="dropdown-item"><span>Test Dropdown 2</span></a>
         <a class="dropdown-item"><span>Test Dropdown 3</span></a>
         <a class="dropdown-item"><span>Test Dropdown 4</span></a>
         <a class="dropdown-item"><span>Test Dropdown 5</span></a>
         <a class="dropdown-item"><span>Test Dropdown 6</span></a>
         <a class="dropdown-item"><span>Test Dropdown 7</span></a>
         <a class="dropdown-item"><span>Test Dropdown 8</span></a>
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
      </div>
   </div>
</div>

<div class="test">
   <div class="dropdown">
      <a title="Tu Voto" data-flip="false" class="btn btn-priMary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
         <a class="dropdown-item"><span>Test Dropdown 2</span></a>
         <a class="dropdown-item"><span>Test Dropdown 3</span></a>
         <a class="dropdown-item"><span>Test Dropdown 4</span></a>
         <a class="dropdown-item"><span>Test Dropdown 5</span></a>
         <a class="dropdown-item"><span>Test Dropdown 6</span></a>
         <a class="dropdown-item"><span>Test Dropdown 7</span></a>
         <a class="dropdown-item"><span>Test Dropdown 8</span></a>
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
      </div>
   </div>
</div>


<div class="test">
   <div class="dropdown">
      <a title="Tu Voto" data-flip="false" class="btn btn-priMary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
         <a class="dropdown-item"><span>Test Dropdown 2</span></a>
         <a class="dropdown-item"><span>Test Dropdown 3</span></a>
         <a class="dropdown-item"><span>Test Dropdown 4</span></a>
         <a class="dropdown-item"><span>Test Dropdown 5</span></a>
         <a class="dropdown-item"><span>Test Dropdown 6</span></a>
         <a class="dropdown-item"><span>Test Dropdown 7</span></a>
         <a class="dropdown-item"><span>Test Dropdown 8</span></a>
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
      </div>
   </div>
</div>


<div class="test">
   <div class="dropdown">
      <a title="Tu Voto" data-flip="false" class="btn btn-priMary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
         <a class="dropdown-item"><span>Test Dropdown 2</span></a>
         <a class="dropdown-item"><span>Test Dropdown 3</span></a>
         <a class="dropdown-item"><span>Test Dropdown 4</span></a>
         <a class="dropdown-item"><span>Test Dropdown 5</span></a>
         <a class="dropdown-item"><span>Test Dropdown 6</span></a>
         <a class="dropdown-item"><span>Test Dropdown 7</span></a>
         <a class="dropdown-item"><span>Test Dropdown 8</span></a>
         <a class="dropdown-item"><span>Test Dropdown 9</span></a>
      </div>
   </div>
</div>


<div class="test">
   <div class="dropdown">
      <a title="Tu Voto" data-flip="false" class="btn btn-priMary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
         <a class="dropdown-item"><span>Test Dropdown 2</span></a>
         <a class="dropdown-item"><span>Test Dropdown 3</span></a>
         <a class="dropdown-item"><span>Test Dropdown 4</span></a>
         <a class="dropdown-item"><span>Test Dropdown 5</span></a>
         <a class="dropdown-item"><span>Test Dropdown 6</span></a>
         <a class="dropdown-item"><span>Test Dropdown 7</span></a>
         <a class="dropdown-item"><span>Test Dropdown 8</span></a>
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
      </div>
   </div>
</div>

<div class="test">
   <div class="dropdown">
      <a title="Tu Voto" class="btn btn-priMary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
         <a class="dropdown-item"><span>Test Dropdown 2</span></a>
         <a class="dropdown-item"><span>Test Dropdown 3</span></a>
         <a class="dropdown-item"><span>Test Dropdown 4</span></a>
         <a class="dropdown-item"><span>Test Dropdown 5</span></a>
         <a class="dropdown-item"><span>Test Dropdown 6</span></a>
         <a class="dropdown-item"><span>Test Dropdown 7</span></a>
         <a class="dropdown-item"><span>Test Dropdown 8</span></a>
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
      </div>
   </div>
</div>