html - 如何让我的导航栏在较小的窗口上动态调整大小？

Question

好的，所以我构建了我的导航栏，它看起来完全符合我的要求，但是如果我使窗口小于屏幕的 75%，我的 css 就会直接从窗口中弹出。我怎样才能更有效地对此进行编码，以便将导航栏保持在较小的尺寸？感谢任何帮助，我对此很陌生。

CSS:

div#hmenu { 
   margin: 0; 
   padding: .3em 0 .3em 0; 
   /*background: #ddeebb; */
   width: 100%; 
   text-align: center; 
} 

div#hmenu ul { 
   list-style: none; 
   margin: 0; 
   padding: 0; 
} 

div#hmenu ul li { 
   margin: 0; 
   padding: 0; 
   display: inline; 
} 

div#hmenu ul a:link{ 
   margin: 0; 
   padding: .3em 1em .3em 1em; 
   text-decoration: none; 
   font-size: medium; 
   color: #ffffff; 
} 

 div#hmenu ul a:visited{ 
   margin: 0; 
   padding: .3em 1em .3em 1em; 
   text-decoration: none; 
   font-weight: bold; 
   font-size: medium; 
   color: #ffffff; 
} 



div#hmenu ul a:hover{ 
   margin: 0; 
   padding: .3em 1em .3em 1em; 
   text-decoration: none;  
   font-size: medium; 
   color: #000000; 
   background-color: #FFFFFF; 
}

下面的 HTML:

<!--- my nav bar -->
<div id="hmenu">
<ul>
<li><a href="#home_new.php">Home</a></li>
<li><a href="#home_copy_mp2.php">Explore our Collection</a></li>
<li><a href="#about_our_site.php">About the archive</a></li>
<li><a href="#our_staff.php">Our Staff</a></li>
<li><a href="#donate.php">Donate</a></li>
<li><a href="#exhibitions.php">Exhibitions</a></li>
<li><a href="#contact.php">Contact</a></li>
</ul>
</div>

Answer 1

我修好了!我忘记了我后来实际上在 css 中放入了一个 @media(当时正在玩超大屏幕)并忘记将其完全注释掉。你的评论让我检查并看到我的错误。所以媒体查​​询既可以解决问题也可以制造问题...

@media screen and (min-width: 1370px) {
    body.hero-image #main > .hero-container .img-wide {
        display: inline;
    }
}