调整浏览器大小时无法将下拉菜单居中

Question

因此，当我运行页面并调整浏览器大小/在移动设备上时，我遇到了麻烦，下拉菜单变得居中并从页面上消失了。 我认为我必须修复填充水平，但是我不确定在何时何地填充它会比我正在修复的混乱得多。

任何帮助，帮助！

[

 $('.drop-down').click(function() { $(this).hide(); }); $('.nav-main li').click(function() { $('.drop-down').hide(); }); //drop down slide down $('.nav-main li ul').hide().removeClass('.drop-down'); $('.nav-main li').hover( function openDrop() { $('ul', this).stop().slideDown(900); }, function closeDrop() { $('ul', this).stop().slideUp(1000); }); 

 .nav-main { position: absolute; top: 0; height: 65px; width: 100%; text-align: center; } .nav-main ul { position: relative; margin: 0 auto; padding: 0; list-style: none; font-size: 22px; line-height: 100%; font-family: 'Futura W01 Bold', sans-serif; text-align: center; text-transform: uppercase; display: inline-block; width: 100%; } .nav-top { position: relative; margin: 0; padding: 0 66px 0 50px; float: none; display: inline-block; list-style: none; } .nav-top:first-child { padding-left: 0; } .nav-top:last-child { background-image: none; padding-right: 0; } .nav-top:last-child:after { content: none; } .nav-top > a { position: relative; display: block; margin: 0; color: #6f6f6f; text-decoration: none; padding-top: 20px; padding-bottom: 5px; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .nav-top a:hover, .nav-top.active > a { color: #454545; border-bottom: 4px solid #00e9d9; text-decoration: none; } .nav-top ul { display: none; position: absolute; left: -8.75px; width: 105%; top: calc(100% - 1px); border-bottom-left-radius: .3em; border-bottom-right-radius: .3em; } .nav-top:hover ul { position: absolute; top: calc(100% - 1px); left: -8.75px; width: 105%; } .nav-top li { float: center; background-color: #e9e9e9; padding-top: 16px; padding-bottom: 10px; text-align: inherit; } .nav-top li:last-child { padding-bottom: 16px; border-bottom-left-radius: .3em; border-bottom-right-radius: .3em; } .nav-top li > a { position: relative; display: inline; margin: 0; color: #6f6f6f; text-decoration: none; padding-top: 20px; padding-bottom: 1px; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .nav-top:after { display: block; position: absolute; left: 100%; top: -17px; width: 22px; z-index: 1; transform: translateX(-50%); height: 100%; -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="nav-main" role="navigation"> <ul> <li class="nav-top"><a href="#welcome">Welcome</a></li> <li class="nav-top"><a href="#about">About</a> <ul class="drop-down"> <li class="nav-drop"><a href="#about">Services</a></li> <li class="nav-drop"><a href="#client">Clients</a></li> <li class="nav-drop"><a href="#press">Press</a></li> <li class="nav-drop"><a href="#leadership">Leadership</a></li> <li class="nav-drop"><a href="#twitter">Follow Us</a></li> </ul> </li> <li class="nav-top"><a href="#contact">Contact</a></li> </ul> <span class="nav-arrow"></span> </nav> 

] 3

Answer 1

您可以使用@media断点来定位特定的浏览器宽度，以减小菜单的字体大小（现在较小的屏幕尺寸）。

@media only screen and (max-width: 767px) {
  .nav-main ul {
    font-size: 18px;
  }
}

看到这个小提琴 （减小框架窗口的宽度以查看更改）

当然，字体大小和浏览器窗口阈值宽度取决于您和您的需要。 并且您可能想要更改更多的字体大小...例如填充。

Answer 2

通过使用媒体查询，您可以解决此问题，媒体查询意味着您将根据设备屏幕尺寸定义CSS，您可以从中了解有关媒体查询的更多信息。

Answer 3

虽然其他答案在使用@media断点时是正确的，但我也建议使用'rem'单位表示大小，而不是“ px”。 在相对单位工作有几个优点