CSS导航栏没有出现

时间:2013-04-29 02:31:50

标签: css3 liquid-layout

我想设置一个隐藏菜单栏的页面,具体取决于屏幕的大小。我有它设置,以便当有人将其设置为移动屏幕尺寸(我相信480px)时,此菜单栏应该消失。但是,当我将nag指定为display:none时,它将不会出现在页面上。这是代码:

以下是网址:http://matthewtbrown.com/jeffandcricketquilt/liquid/index2.html

<nav class="fluid fluidList hide_mobile">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="quiltshowphotos.html">Quilt Show Photos</a></li>
<li><a href="videotutorials.html">Video Tutorials</a></li>
<li><a>Services</a>
<ul>
<li><a href="quiltphotography.html">Quilt Photography</a></li>
<li><a href="photostofabric.html">Photos to Fabric Transfers</a></li>
<li><a href="download.html">Downloadable Patterns</a></li>
</ul>
</li>
<li><a>About Us</a>
<ul>
<li><a href="contactus.html">Contact Us</a></li>
<li><a href="photocredit.html">Photo Credit</a></li>
</ul>
</li>
</ul></nav>

这是CSS:     / *移动布局:480px及以下。 * /

.gridContainer {
margin-left: auto;
margin-right: auto;
width: 86.45%;
padding-left: 2.275%;
padding-right: 2.275%;
clear: none;
float: none;
background-image: url(../images/pattern2.jpg);
background-repeat: repeat;
min-width: 480px;
}
#div1 {
}
.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}

1 个答案:

答案 0 :(得分:0)

在@media only屏幕和(min-width:769px)区域中

.hide_mobile {display:block},然后在@media only屏幕和(max-width:480px)区域放置.hide_mobile {display:none} 。

如果有帮助,请告诉我。