导航栏响应CSS3和媒体查询中的显示块

我想创建一个响应html和CSS3的导航栏。我使用媒体查询来显示或不显示切换菜单（显示打开/关闭）的链接栏

这段代码运行正常，但我想改变显示链接菜单在一行每链接（或最多2）。但是我的代码中的所有更改总是显示在同一行中的所有链接

对于大屏幕，我的菜单在一行上，对于小屏幕，菜单是切换，每个链接显示一行（或最多2行）

媒体查询中的“我的显示块”似乎未运行

你能帮我理解为什么媒体查询不会改变我链接的显示引擎吗

HTML代码

<nav id="navigation" class="clearfix">
    <ul class="clearfix">
        <li id="homeIcon"><a href=""></a></li>
        <li><a href="">link 1</a></li>
        <li><a href="">link 2</a></li>
        <li><a href="">link 3</a></li>
        <li><a href="">link 4</a></li>
        <li><a href="">link 5</a></li>
    </ul>
    <a href="#" id="pull">Menu</a>
</nav>

JSFiddle：

---

感谢您的支持

您最初是通过以下方式开始选择lis的：

#navigation li

但当涉及到媒体查询时，您开始对您的选择更为笼统，例如：

@media only screen and (max-width : 320px){
nav li
{
    display: block;
    float: none;
    width: 100%;
}

因此，如果您检查元素，您将看到#导航li正在覆盖媒体查询。尝试将您的选择更改为：

@media only screen and (max-width : 320px)
{
#navigation li
{
    display: block;
    float: none;
    width: 100%;
}

我以为导航li和#导航li（选择导航）是一样的……但不是！好的，谢谢你（Dreds10 8-）