Question

我在这里有一个小问题 - 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>

Answer 1

您可以使用CSS媒体查询来完成此操作：

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

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

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

响应绝对定位的菜单

1 个答案: