Html 使用媒体查询隐藏主菜单

在我的网站中，我有如下菜单导航：

   <nav id="main-menu" class="menu-wrapper col-md-12 collapse navbar-collapse mynavbar">
    <ul id="mn_menu" class="menu nav navbar-nav">
        <li><a href="<?=site_url()?>">Home</a></li>
        <li><a href="<?=site_url()?>section/about-us">About Us</i></a></li>
        <li><a href="<?=site_url()?>section/services">Services</a></li>
        <li><a href="<?=site_url()?>section/contact-us">Contact Us</a></li>
     </ul>
   </nav>

但是，当我使用下面给出的内联css时，它会隐藏菜单

<ul id="mn_menu" class="menu nav navbar-nav" style="display:none;">

---

请建议如何使用媒体查询从CSS文件中隐藏我的菜单。请提前感谢。

您需要

最小宽度

，而不是

最大宽度

minwidth

表示只要浏览器宽度大于或等于

992px

，它就会应用下面的CSS规则

@media screen and (min-width: 992px) {
   #mn_menu {
     display: none;
   }
}

@media screen and (min-width: 992px) {
   #mn_menu {
     display: none;
   }
}