如何隱藏導航菜單列表？

我這樣做的網站，我有下拉列表像下面的圖片 enter image description here 如何隱藏導航菜單列表？

它工作正常，但在我的瀏覽器尺寸減小該菜單會掉下來像下面的圖片 enter image description here

這裏是我的CSS代碼：

nav ul ul { 
display: none; 
     } 
    nav ul li:hover > ul { 
    display: block; 
} 
nav ul { 
background: #efefef; 
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
box-shadow: 0px 0px 9px rgba(0,0,0,0.15); 
padding: 0 20px; 
border-radius: 10px; 
list-style: none; 
position: fixed; 
display: inline-table; 
overflow:hidden; 
    } 
    nav ul:after { 
    content: ""; clear: both; display: block; 

} 
nav ul li { 
float: left; 

    } 
nav ul li:hover { 
    background: #4b545f; 
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%); 
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); 
    background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); 
} 
    nav ul li:hover a { 
    color: #fff; 
    } 

nav ul li a { 
display: block; padding: 25px 40px; 
color: #757575; text-decoration: none; 
} 
nav ul ul { 
background: #5f6975; border-radius: 0px; padding: 0; 
position: absolute; top: 100%; 
    }

這裏是我的html代碼：

![enter image description here][3]

來源

2012-12-07 rangasathish

難道我理解錯的話，如果我認爲你想達到什麼樣的根據最大視口寬度隱藏選擇菜單項的佈局？ – Maritim

我該如何擺脫？是否有任何財產設置？ @Maritim – rangasathish

要走的路是響應式CSS和媒體查詢。 – Maritim

你當屏幕分辨率變小時，可以使用CSS媒體查詢來隱藏菜單。添加到您的CSS代碼：

@media (max-width: 640px) { 

nav { 
    display:none; 
} 

}

對於移動用戶來說，這一行添加到您的<head>段太：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

來源

2012-12-07 12:22:45 chrki

我試過你的代碼，當screedn分辨率變小時，整個菜單就會消失。我想要顯示仍然... – rangasathish

然後，我建議你製作更小的填充和字體，當屏幕寬度變得更小時，按鈕上的文本週圍有很多空間。只需將新值添加到@media {...}片段中，就像我在示例中用nav {...}所做的那樣。 – chrki

如何隱藏導航菜單列表？

回答

相關問題