html - 我希望第二个菜单出现在媒体上

我只想在移动设备上显示第二个菜单，但是代码没有响应。

@media (max-width: 480px) {
  .branding {
    background: red!important;
  }
}

<div class="branding">
  <div class="branding2">
    <div class="logo_main">
      <a href="http://#.gr/"><img class=" preload-me" src="http://#.gr/wp-content/uploads/2018/01/logo-#-small.png" srcset="http://#.gr/wp-content/uploads/2018/01/logo-#-small.png 350w, http://#.gr/wp-content/uploads/2018/01/logo-#-big.png 600w" width="350" height="73" sizes="350px"
          alt="Studio Alex"></a>
    </div>
    <div class="menu_main">
      <ul style="list-style:none;" id="primary-menu" class="main-nav underline-decoration upwards-line outside-item-remove-margin" role="menu">
        <li style=" float:left;" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-146 first"><a style="display:block;text-align:center;padding:14px 16px; text-decoration:none;" href="http://#.gr/?page_id=141" data-level="1"><span class="menu-item-text"><span class="menu-text">Photography</span></span></a></li>
        <li style="float:left;" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-70"><a style="display:block;text-align:center;padding:14px 16px; text-decoration:none;" href="http://#.gr/?page_id=61" data-level="1"><span class="menu-item-text"><span class="menu-text">Cinematography</span></span></a></li>
        <li style="float:left;" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-445"><a style="display:block;text-align:center;padding:14px 16px; text-decoration:none;" href="http://#.gr/?page_id=442" data-level="1"><span class="menu-item-text"><span class="menu-text">Contact</span></span></a></li>
        <li style="float:left;" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-567"><a style="display:block;text-align:center;padding:14px 16px; text-decoration:none;" href="http://#.gr/" data-level="1"><span class="menu-item-text"><span class="menu-text">Home</span></span></a></li>
      </ul>
    </div>
  </div>
</div>

我需要在台式机上使用display:none移动版，在移动设备上使用显示块。我输入了代码，但它没有读取media命令。有任何想法吗？

最佳答案

您没有指定最大宽度。
尝试这个：

@media screen and (max-width: 480px) {
    .branding {
      background:red!important;
    }
}

编辑：

就像Quentin在注释中建议的那样：您的代码示例不完整，或者您忘记了<style>起始标记。