Html 无序列表背景色在媒体查询中消失

我在HTML5页面的页脚有两个导航栏列表，第一个列表有12个用于导航网站的项目，第二个包含社交媒体链接和一个附加项目：

<nav id="footer_navbar">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Thing 1</a></li>
    <li><a href="#">Thing 2</a></li>
    <li><a href="#">Thing 3</a></li>
    <li><a href="#">Thing 4</a></li>
    <li><a href="#">Thing 5</a></li>                    
    <li><a href="#">Thing 6</a></li>
    <li><a href="#">Thing 7</a></li>
    <li><a href="#">Thing 8</a></li>
    <li><a href="#">Thing 9</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>

  <ul>                  
    <li><a href="#">Facebook</a></li>
    <li><a href="#">Twitter</a></li>
    <li><a href="#">YouTube</a></li>
    <li><a href="#">One Last Thing</a></li>
  </ul>
</nav>

最后一部分将两个列表分为两行，而不是在它们之间放置一个

标记。我是这样发现的。您会注意到我从建议的代码中删除了

，因为我的列表没有嵌套。虽然我得到了期望的结果，但如果有理由我应该在

中离开，请告诉我

一切正常，现在我想在CSS中使用媒体查询，以便前面提到的菜单更改类似于中显示的内容（区别在于背景颜色、屏幕上的位置以及边距和填充）

因此，我将此媒体查询添加到CSS文件：

@media screen and (max-width: 480px) {

  #footer_navbar li {
    background:#222;
    display:block;
    margin:5px;
  }

  #footer_navbar a {
    display:block;
    padding:3px;
  }

}

当我调整浏览器窗口的大小或在iPhone4S上查看时，除了

背景之外，其他一切都正常工作：#222未显示在
元素中。我可以使用Firebug在CSS中看到它，但是颜色没有显示出来。其他一切正常，边距和填充正确，链接显示为
块
，一切正常。经过几个小时的挠头，我还没有弄清楚我错过了什么或做错了什么

我们将非常感激您的帮助

更新

可以看到该网站的一个示例
我通过将ID与类交换，获得了更改为#222的背景。您在整个标记中都使用了ID，但请尝试切换到类，直到您真正需要额外级别的特殊性。让我知道这是否适合您。
您有css样式

.footer_navbar ul li {
  display:inline;
}

和媒体查询css

.footer_navbar li {
  background:#222;
  display:block;
  margin:5px;
}

将查询css更改为

.footer_navbar ul li {
  background:#222;
  display:block;
  margin:5px;
}

它会起作用的

li
的
display
属性，即
display:block
，在从

.footer_navbar ul li {
  display:inline;
}

您的CSS中还有其他规则指定列表项的背景吗？没有，它们如下所示。这就是为什么我如此困惑的原因，但我承认，样式列表从来都不是我的强项。我还没有看到任何关于为什么应该以某种方式进行的好教程，等等。更具体地说：我更改了您的标记以反映：然后更改了媒体查询CSS中的选择，当窗口被缩小时，查询工作正常。感谢您的帮助！我查看了示例页面上的样式表和页脚，并按照您的建议进行了操作，我将所有
footer\u navbar
id切换到类…但它仍然不起作用。我一定还是忽略了什么？我在一个编辑器中找到了它，并通过将导航id换成一个类来让它工作。您和我将其更改为，然后更改了媒体查询代码以反映CSS标记中的更改。编辑后的新媒体查询如下：@media screen和（最大宽度：480px）{h3{font size:75%；}.container{margin:10px auto；}.footer_导航栏li{background:#222；display:block；margin:5px；}.footer_navbar a{display:block；padding:3px；}}}这怎么不是问题的答案？我尽可能的具体。谢谢！我知道我少了一些小东西。我对测试场地做了改动，效果很好。列表的这种CSS格式长期以来一直困扰着我，何时将元素组合在一起，例如
ul
li
和
a
，以及何时将它们单独设置样式。奇怪的是，经过几个小时的搜索，我还没有找到一个好的教程。你在这里的解释很有帮助。再次感谢你！Sai，你有什么建议可以让我了解CSS中liste元素的正确样式吗？
.footer_navbar ul li {
  display:inline;
}