将 ul 显示为下拉菜单答案

【问题标题】：display ul as dropdown将 ul 显示为下拉菜单
【发布时间】：2012-10-05 03:42:22
【问题描述】：

当正文宽度小于给定（媒体 css）（手机等）时，是否可以使用纯 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/ - 调整大小后查看菜单。

【问题讨论】：

标签： javascript css drop-down-menu html-lists

【解决方案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

【讨论】：

【解决方案2】：

您可以使用javascript检测屏幕宽度，如果屏幕宽度太小，您可以使用标签将列表更改为下拉菜单。谷歌“javascript innerHTML”了解更多信息如何做到这一点。

【讨论】：

【解决方案3】：

如果您查看禁用 CSS 的示例 URL（或查看源代码），您将看到两种类型的导航都存在（嵌套列表和表单选择）。该页面正在使用媒体查询来确定要隐藏哪个元素：窄设备将隐藏列表版本，而宽设备将隐藏表单版本。

【讨论】：