有很多问题询问如何在屏幕上显示出现在右边并被斩断的菜单项，但这是不同的，因为我需要一种方法来使所有出现在屏幕底部的菜单项消失。 >
因为人们喜欢编写代码，所以我去了Bootstrap 4网站，并根据情况调整了顶级导航栏示例。在您请求CSS之前，我完全没有，因为我取消了整个项目以重新开始，而有些人则没有。不会喜欢复制/粘贴70个菜单项，但这是我需要的。您想要还是不需要代码。
几个月前，我看到了一些使用bootstrap 4导航栏的bootstrap教程站点，当我在不同设备上的不同浏览器中查看它们时，它们的问题与我在此处询问的完全相同，但似乎没有请注意，访问者无法查看所有菜单项，因为他们对此没有做任何事情。什么网站？现在不知道了，就像前一阵子一样，我不收藏这样的网站。
<nav class="navbar navbar-expand-xl navbar-dark fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown 1
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">1</a>
<a class="dropdown-item" href="#">2</a>
<a class="dropdown-item" href="#">3</a>
<a class="dropdown-item" href="#">4</a>
<a class="dropdown-item" href="#">5</a>
<a class="dropdown-item" href="#">6</a>
<a class="dropdown-item" href="#">7</a>
<a class="dropdown-item" href="#">8</a>
<a class="dropdown-item" href="#">9</a>
<a class="dropdown-item" href="#">10</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown 2
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown2">
<a class="dropdown-item" href="#">1</a>
<a class="dropdown-item" href="#">2</a>
<a class="dropdown-item" href="#">3</a>
<a class="dropdown-item" href="#">4</a>
<a class="dropdown-item" href="#">5</a>
<a class="dropdown-item" href="#">6</a>
<a class="dropdown-item" href="#">7</a>
<a class="dropdown-item" href="#">8</a>
<a class="dropdown-item" href="#">9</a>
<a class="dropdown-item" href="#">10</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown 3
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown3">
<a class="dropdown-item" href="#">1</a>
<a class="dropdown-item" href="#">2</a>
<a class="dropdown-item" href="#">3</a>
<a class="dropdown-item" href="#">4</a>
<a class="dropdown-item" href="#">5</a>
<a class="dropdown-item" href="#">6</a>
<a class="dropdown-item" href="#">7</a>
<a class="dropdown-item" href="#">8</a>
<a class="dropdown-item" href="#">9</a>
<a class="dropdown-item" href="#">10</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown4" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown 4
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown4">
<a class="dropdown-item" href="#">1</a>
<a class="dropdown-item" href="#">2</a>
<a class="dropdown-item" href="#">3</a>
<a class="dropdown-item" href="#">4</a>
<a class="dropdown-item" href="#">5</a>
<a class="dropdown-item" href="#">6</a>
<a class="dropdown-item" href="#">7</a>
<a class="dropdown-item" href="#">8</a>
<a class="dropdown-item" href="#">9</a>
<a class="dropdown-item" href="#">10</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown5" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown 5
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown5">
<a class="dropdown-item" href="#">1</a>
<a class="dropdown-item" href="#">2</a>
<a class="dropdown-item" href="#">3</a>
<a class="dropdown-item" href="#">4</a>
<a class="dropdown-item" href="#">5</a>
<a class="dropdown-item" href="#">6</a>
<a class="dropdown-item" href="#">7</a>
<a class="dropdown-item" href="#">8</a>
<a class="dropdown-item" href="#">9</a>
<a class="dropdown-item" href="#">10</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown6" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown 6
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown6">
<a class="dropdown-item" href="#">1</a>
<a class="dropdown-item" href="#">2</a>
<a class="dropdown-item" href="#">3</a>
<a class="dropdown-item" href="#">4</a>
<a class="dropdown-item" href="#">5</a>
<a class="dropdown-item" href="#">6</a>
<a class="dropdown-item" href="#">7</a>
<a class="dropdown-item" href="#">8</a>
<a class="dropdown-item" href="#">9</a>
<a class="dropdown-item" href="#">10</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown7" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown 7
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown7">
<a class="dropdown-item" href="#">1</a>
<a class="dropdown-item" href="#">2</a>
<a class="dropdown-item" href="#">3</a>
<a class="dropdown-item" href="#">4</a>
<a class="dropdown-item" href="#">5</a>
<a class="dropdown-item" href="#">6</a>
<a class="dropdown-item" href="#">7</a>
<a class="dropdown-item" href="#">8</a>
<a class="dropdown-item" href="#">9</a>
<a class="dropdown-item" href="#">10</a>
</div>
</li>
</ul>
</div>
</nav>
现在，使用上面的导航栏进入可折叠状态，并尝试访问每个菜单（例如：下拉菜单7，项目10），因为我不能。
在我报废的项目中，我参加了.dropdown-menu类：
height: auto;
max-height: 350px;
overflow-x: hidden;
width: 350px;
这使我可以滚动Dropdown1，Dropdown2 ...，但是当您进入其他下拉菜单时，您会看到它们不在屏幕上，无法进入它们。
我的问题是（如果不太明显）：
当菜单折叠或未折叠时，如何获得所有这些菜单项？如果无法解决，那我该如何将其放入水平菜单？
感谢您阅读。