navbar响应式CSS3和媒体查询中的显示块

Question

我想创建一个与HTML和CSS3响应的导航栏。我使用媒体查询进行显示，或者没有链接栏切换菜单（显示开/关）。

此代码正确运行，但我想要改变显示链接菜单在每条链接（或2最大）在一行中。但是，我的代码中的所有更改始终显示在同一行中的所有链接。

对于大屏幕我的菜单是在1行，对于较小的屏幕菜单是切换和每条链接显示1行（或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：JSFiddle

感谢您的支持

Answer 1

您最初开始通过选择LIS：

#navigation li 

但是，当它得到媒体查询例如，您开始更加关注您的选择：

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

因此，如果您检查元素，您将看到#navigation li重写媒体查询。尝试将您的选择更改为：

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