Javascript 显示为下拉列表

当机身宽度小于给定值（媒体css）（手机等）时，是否可以使用纯css或真正简单的方式将nav ul菜单转换为下拉列表

假设：我想正常显示它，但当使用窄屏幕移动设备时，我想将其显示为下拉菜单-与选择表单相同

[编辑]

---

类似：-调整大小后查看菜单。

我不知道您到底想要什么，但这可能会对您有所帮助。我希望

<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;

}​

试验






​
ulli{
显示：无；
}
ul:hover li{
显示：块；
}​

---

您可以使用javascript检测屏幕宽度，如果屏幕宽度太小，您可以使用标记将列表更改为下拉菜单。谷歌“javascript innerHTML”获取更多信息。如果查看禁用CSS的示例URL（或查看源代码），您将看到两种类型的导航都存在（嵌套列表和表单选择）。页面正在使用媒体查询来确定要隐藏的元素：窄设备将隐藏列表版本，而宽设备将隐藏表单版本

<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;

}​