使用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 ：//响应-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;}
    ...
}