响应式绝对定位菜单答案

【问题标题】：Responsive absolutely positioned menu响应式绝对定位菜单
【发布时间】：2014-12-04 21:17:02
【问题描述】：

我在这里有一个 jsfiddle - http://jsfiddle.net/jxvg7zvd/30/

这是一个非常简单的导航示例，在第 5 个链接下方有一个大菜单。

大菜单绝对位于链接下方，其中的链接具有百分比宽度

我希望大菜单具有响应性，因此当窗口较小时，菜单内的链接会变窄。

因为在调整窗口大小时菜单是绝对定位的，所以它不会调整大小。

我怎样才能有一个像这样响应的大悬停菜单。

    <div class="nav">
        <ul class="top-nav">
            <li><a href="">One</a></li>
            <li><a href="">Two</a></li>
            <li><a href="">Three</a></li>
            <li><a href="">Four</a></li>
            <li class="btn"><a href="">Five</a>
                <div class="mega-nav">
                    <div class="block">
                        <ul class="block-nav">
                            <li><a href="">One</a></li>
                            <li><a href="">Two</a></li>
                            <li><a href="">Three</a></li>
                            <li><a href="">Four</a></li>
                        </ul>
                    </div>
                    <div class="block">
                        <ul class="block-nav">
                            <li><a href="">One</a></li>
                            <li><a href="">Two</a></li>
                            <li><a href="">Three</a></li>
                            <li><a href="">Four</a></li>
                        </ul>
                    </div>
                    <div class="block">
                        <ul class="block-nav">
                            <li><a href="">One</a></li>
                            <li><a href="">Two</a></li>
                            <li><a href="">Three</a></li>
                            <li><a href="">Four</a></li>
                        </ul>
                    </div>
                    <div class="block">
                        <ul class="block-nav">
                            <li><a href="">One</a></li>
                            <li><a href="">Two</a></li>
                            <li><a href="">Three</a></li>
                            <li><a href="">Four</a></li>
                        </ul>
                    </div>
                    <div class="block">
                        <ul class="block-nav">
                            <li><a href="">One</a></li>
                            <li><a href="">Two</a></li>
                            <li><a href="">Three</a></li>
                            <li><a href="">Four</a></li>
                        </ul>
                    </div>
                </div>    
            </li>
        </ul>

    </div>

【问题讨论】：

不会使用媒体查询来解决这个问题吗？ developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
您是否尝试过使用媒体查询来更改 .mega-nav 的宽度？

标签： html css menu responsive-design absolute

【解决方案1】：

您可以使用 CSS 媒体查询来做到这一点，如下所示：

@media (max-width:600px) {
    .mega-nav {
        width: 400px;
    }
}

@media (max-width:400px) {
    .mega-nav {
        width: 250px;
    }
}

您可能想要调整这些值，并可能添加更多媒体查询 :)

【讨论】：