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

我有一个HTML for me水平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使其成为下拉菜单的最佳方式是什么：当页面变小时

我已经使这个菜单消失时，页面变得太小，使用媒体查询，但我想只是使用CSS来改变它，就像上面的菜单链接，并保持相同的HTML

---

下面是完整的代码：

您的媒体查询应该覆盖默认样式，因此将它们放在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;}
    ...
}

---

调整导航大小，使每个项目100%宽