使绝对菜单响应不断变化的尺寸

Question

我已经看到许多类似的问题，但尚未找到解决我问题的答案。 我需要使该菜单下拉菜单响应页面，但由于它是绝对的，所以我不确定如何实现此功能。使用JS并不是问题，任何解决方案都可以。

header{
nav{
    min-width: 280px;
    max-width: 479px;
    margin: 0 auto;
    clear: both;
    position: relative;
    .logo{
        padding: 13px 0 10px 9px;
        float: left;
    }//End of logo
    ul{
        list-style-type: none;
        border-bottom: 2px solid $white;
        margin-bottom: 6px;
        li{
            line-height: 23px;
            .nav-img{
                line-height: 50px;
                float: right;
                margin-right: 18px;
            }
            .nav-content{
                position: absolute;
                top: 60px;
                overflow: hidden;
                background-color: $dropdownColor;
                //margin: 0 auto;
                min-width: 280px;
                //width: 100%;
                max-width: 440px;
                padding: 0px 20px;
                max-height: 0px;
                .arrow{
                float: right;
                padding-top: 13px;
                }
                .nav-sub{
                    .second-menu{
                        li{
                            font-size: 12px;
                            display: inline-block;
                            line-height: 8px;
                        }
                        li+li:before {
                            padding: 2px;
                            color: $white;
                            content: "/\00a0";
                        }
                    }
                    a{
                        display: inline-block;
                        text-decoration: none;
                        color: $white;
                        font-weight: bold;
                    }
                    input{
                        width: 100%;
                        padding: 5px;
                        border: none;
                        background-image: url("../images/search_icon.png");
                        background-repeat: no-repeat;
                        background-position: center right 10px;
                        margin: 15px 0;
                    }  
                }
            }  
        }
        li:first-child{
            padding-top: 13px;
        }
        li:last-child{
            padding-bottom: 20px;
        }
    }//End of menu
}//End of nav
}//End of header

    <header>
        <nav>
            <div class="logo">
                <a href="#"><img src="./images/logo.png" alt="Error loading image!"></a>
            </div>
            <ul>
                <li>
                    <a href="#" class="nav-img"><img src="./images/menu_shape.png" alt="Error loading image!"></a>
                    <div class="nav-content">
                        <a class="arrow" href=""><img src="./images/dropdown_arrow.png" alt="Error loading image!"></a>                        <div class="nav-sub">
                            <ul>
                                <li><a href="#">About Us</a>
                                    <!--<ul>
                                        <li><a href="">Production</a></li>
                                        <li><a href="">Energy & Commodities</a></li>
                                        <li><a href="">Transport</a></li>
                                        <li><a href=""></a>Industrial Services</li>
                                    </ul>-->
                                </li>
                                <li><a href="#">Divisions</a></li>
                                <li><a href="#">Investors</a></li>
                                <li><a href="#">Corporate Responsibility</a></li>
                            </ul>
                            <ul class="second-menu">
                                <li><a href="">Home</a></li>
                                <li><a href="">Media Centre</a></li>
                                <li><a href="">Careers</a></li>
                                <li><a href="">Contact Us</a></li>
                            </ul>
                            <input type="search" placeholder="Search">
                        </div>
                    </div>
                </li>
            </ul>
        </nav>
    
</header>

这是图像。

我知道我可以将宽度设置为像素，但是宽度不会响应。

Answer 1

使用媒体查询通过分辨率更改CSS规则

https://developer.mozilla.org/en/docs/Web/CSS/Media_Queries/Using_media_queries