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的底部而不是顶部。

我不打算对整个事情进行编码，但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;}
    ...
}

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

1 个答案: