javascript - 使用 CSS 将水平菜单更改为移动设备的响应式菜单

Question

我有这个 HTML 水平 CSS 菜单：

<div id="cssmenu">
    <ul>
        <li><a href="#"><span>Homepage</span></a></li>
        <li><a href="#"><span>Services</span></a>
            <ul>
                <li><a href="#"><span>LINK</span></a></li>
            </ul>
        </li>
        <li><a href="#"><span>Projects</span></a></li>
        <li><a href="#"><span>Contact Us</span></a></li>
    </ul>
</div>

当页面变小时，使用 css 使其成为下拉菜单（如：http ://responsive-nav.com/）的最佳方法是什么。

当页面使用媒体查询变得太小时，我已经使此菜单消失，但我想只使用 CSS 将其更改为类似于菜单（上面的链接）并保持相同的 HTML。

这是完整代码的小提琴：http: //jsfiddle.net/auBpX/

Answer 1

您的媒体查询应该覆盖默认样式，因此将它们放在 CSS 的底部而不是顶部。

我不会编写整个代码，但这个小提琴可能会让你开始。

@media screen and (max-width: 520px) {
    #cssmenu {height:10px; overflow:hidden;}
    #cssmenu:hover {height:auto; overflow:none;}
    #cssmenu li {display:block; width:100%; float:none;}
    ...
}