在大多数网站中，如果你挤压/减小浏览器窗口的宽度，顶部导航栏中的导航链接行会因为溢出而塌陷成下拉菜单按钮。我该如何将该功能添加到我的网站?
目前，如果我减少浏览器窗口的大小/宽度，我的网站中溢出的链接/按钮就会消失。如何使用下拉菜单按钮在溢出的情况下，由于减少的宽度?
对于媒体查询，你可以通过设置max-with的理想尺寸来实现，就像这个例子中所示如果浏览器的尺寸低于1700x，它会将其flex-direction更改为column，将高度更改为auto。
* {
font-size:40px;
margin: 0;
padding: 0;
}
.navbar-nav{
display: flex;
justify-content: center;
align-items: center;
height: 2rem;
background-color: gray;
}
.nav-links{
list-style: none;
padding: 0.5rem;
font-family:Arial, Helvetica, sans-serif
}
@media only screen and (max-width: 1700px){
.navbar-nav{
height: auto;
flex-direction: column;
background-color: gray;
}
}<body>
<nav class="navbar">
<ul class="navbar-nav">
<li class="nav-links">Home</li>
<li class="nav-links">About</li>
<li class="nav-links">Services</li>
<li class="nav-links">Email</li>
<li class="nav-links">Something</li>
<li class="nav-links">SignUp</li>
<li class="nav-links">Login</li>
<li class="nav-links">Loremips</li>
</ul>
</nav>
</body>