屏幕尺寸的更改菜單對div無效，但不適用於

我建立我的菜單是這樣的：

HTML：

<ul id="top-menu"> 
<li class="active"> 
    <a href="#">HOME</a> 
</li> 
<li> 
    <a href="#div2">ABOUT</a> 
</li> 
</ul>

CSS

#top-menu { 
position: fixed; 
z-index: 1; 
background:#000; 
width:100%; 
height:60px; 
list-style:none; 
z-index:100; 
margin:0 0 0 0; 
} 

#top-menu a { 
display:block; 
width:100px; 
text-align:center; 
line-height:60px; 
text-decoration:none; 
height:60px; 
color:#FFF; 
}

這一切工作正常。現在我嘗試製作響應式菜單。因爲我是新手，所以我決定嘗試一些東西。我偶然發現了一些讓我奇怪爲什麼它不起作用的東西。

出於某種原因，這並不工作：（隱藏菜單）

@media (max-width: 600px) { 
    #top-menu { 
     display: none; 
    } 
}

這doenst：（什麼也沒發生）

@media (max-width: 600px) { 
    #top-menu a{ 
     display: none; 
    } 
}

我用Google搜索之類的東西，但並不真正得到answare？我認爲有可能改變「A」或？

希望任何人都可以幫助我。

問候merijn

來源

2013-12-09 Merijn dk

不知道我理解......

有這個#top-menu a到display none是正確的 - 隱藏LIS

而#menu隱藏所有

http://jsfiddle.net/Riskbreaker/9kwwX/

來源

2013-12-09 15:04:00 Riskbreaker

好吧..真的很奇怪。它不工作在Ushere鉻。＃頂級菜單工作正常..但是當我添加到它像＃頂級菜單它停止工作.. –

如果它適用於我，那麼你有什麼東西不能正常關閉。檢查Chrome控制檯錯誤或Firebug – Riskbreaker

是的，你是對的。那麼我試圖編輯李（＃頂級菜單裏）這也很好。猜猜我會用它。無論如何比較奇怪。如果我發現問題是什麼病，讓你知道！感謝名單 –

你有沒有試過用這樣的東西改變css規則？

@media (max-width: 600px) { 
    .active a{ 
     display: none; 
    } 
}

來源

2013-12-09 15:05:52

屏幕尺寸的更改菜單對div無效，但不適用於

回答

相關問題