顯示UL作爲下拉

Question

是否有可能與純的CSS或非常簡單的方法來傳輸NAV UL菜單作爲下拉列表時體寬度比給定（媒體的CSS）的情況下（移動電話等）

<nav> 
    <ul> 
     <li><a href="#">Blog</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Archives</a></li> 
     <li><a href="#">Contact</a></li> 
     <li class="subscribe"><a href="#">Subscribe via. RSS</a></li> 
    </ul> 
</nav> 

假設：我想正常顯示它，但是在窄屏幕的移動設備上時，要將其顯示爲下拉菜單 - 與選擇表單相同。

[編輯]

是這樣的：http://themewich.com/aware/ - 見菜單調整大小時。

Answer 1

我不知道你想要什麼，但是這也許可以幫助你。我希望

<nav> 
<ul> Test 
    <li><a href="#">Blog</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Archives</a></li> 
    <li><a href="#">Contact</a></li> 
    <li class="subscribe"><a href="#">Subscribe via. RSS</a></li> 
</ul> 
</nav> ​ 

ul li{ 
    display:none; 

} 
ul:hover li{ 
    display:block; 

}​ 

jsFiddle

Answer 2

您可以使用JavaScript檢測屏幕寬度，如果屏幕寬度太小，您可以使用標籤將列表更改爲下拉菜單。谷歌「JavaScript的innerHTML」更多信息如何做到這一點。

Answer 3

如果查看禁用CSS的示例URL（或查看源代碼），您將看到存在兩種類型的導航（嵌套列表和表單選擇）。該頁面正在使用媒體查詢來確定要隱藏的元素：窄設備將隱藏列表版本，而寬設備將隱藏表單版本。