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。

这是一个包含完整代码的 fiddle : http://jsfiddle.net/auBpX/

Answer 1

你的媒体查询应该覆盖默认样式，所以把它们放在你的 css 的底部而不是顶部。

我不打算编写整个代码，但是 this fiddle可能会让您入门。

@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;}
    ...
}