从Cody House-Way实施导航以添加背景模糊？

Question

我基本上是从Cody House实施此导航。对于较小的屏幕<1000px，有没有办法让nav .cd-morph-dropdown .morph-dropdown-wrapper的宽度为90％（而不是100％）并且背景为导航模糊？导航叠加层周围的区域基本上是模糊的，导航清晰。

它的方法是应用过滤器：模糊（10px）到导航后的每个div通过jquery？必须有一个更好的方法。

NAV HTML

    <nav class="main-nav">
        <ul>
            <li class="has-dropdown gallery" data-content="about">
                <a href="#0">About</a>
            </li>

            <li class="has-dropdown links" data-content="pricing">
                <a href="#0">Pricing</a>
            </li>

            <li class="has-dropdown button" data-content="contact">
                <a href="#0">Contact</a>
            </li>
        </ul>
    </nav>

    <div class="morph-dropdown-wrapper">
        <div class="dropdown-list">
            <ul>
                <li id="about" class="dropdown gallery">
                    <a href="#0" class="label">About</a>

                    <div class="content">
                        <ul>
                            <li>
                                <a href="#0">
                                    <em>Title here</em>
                                    <span>A brief description here</span>
                                </a>
                            </li>

                            <li>
                                <a href="#0">
                                    <em>Title here</em>
                                    <span>A brief description here</span>
                                </a>
                            </li>

                            <li>
                                <a href="#0">
                                    <em>Title here</em>
                                    <span>A brief description here</span>
                                </a>
                            </li>

                            <li>
                                <a href="#0">
                                    <em>Title here</em>
                                    <span>A brief description here</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li id="pricing" class="dropdown links">
                    <a href="#0" class="label">Pricing</a>

                    <div class="content">
                        <ul>
                            <li>
                                <h2>Services</h2>

                                <ul class="links-list">
                                    <li><a href="#0">Logo Design</a></li>
                                    <li><a href="#0">Branding</a></li>
                                    <li><a href="#0">Web Design</a></li>
                                    <li><a href="#0">iOS</a></li>
                                    <li><a href="#0">Android</a></li>
                                    <li><a href="#0">HTML/CSS/JS</a></li>
                                    <li><a href="#0">Packaging</a></li>
                                    <li><a href="#0">Mobile</a></li>
                                    <li><a href="#0">UI/UX</a></li>
                                    <li><a href="#0">Prototyping</a></li>
                                </ul>
                            </li>

                            <li>
                                <h2>Projects</h2>

                                <ul class="links-list">
                                    <li><a href="#0">Logo Design</a></li>
                                    <li><a href="#0">Branding</a></li>
                                    <li><a href="#0">Web Design</a></li>
                                    <li><a href="#0">iOS</a></li>
                                    <li><a href="#0">Android</a></li>
                                    <li><a href="#0">HTML/CSS/JS</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </li>

                <li id="contact" class="dropdown button">
                    <a href="#0" class="label">Contact</a>

                    <div class="content">
                        <ul class="links-list">
                            <li><a href="#0">Link #1</a></li>
                            <li><a href="#0">Link #2</a></li>
                            <li><a href="#0">Link #3</a></li>
                            <li><a href="#0">Link #4</a></li>
                            <li><a href="#0">Link #5</a></li>
                            <li><a href="#0">Link #6</a></li>
                        </ul>

                        <a href="#0" class="btn">Get in Touch</a>
                    </div>
                </li>
            </ul>

            <div class="bg-layer" aria-hidden="true"></div>
        </div> <!-- dropdown-list -->
    </div> <!-- morph-dropdown-wrapper -->
</header>

<main class="cd-main-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultrices malesuada scelerisque. Vivamus placerat dignissim eros ut sollicitudin. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse ut tellus euismod, sagittis enim eu, luctus tortor. Cras eros urna, maximus et arcu et, vehicula auctor erat. Aliquam laoreet dui eu magna mollis ornare ut in lectus. Proin nec sapien leo. Phasellus rhoncus risus sit amet mi tempus dignissim. Ut dictum faucibus ipsum, congue aliquet mauris laoreet vel. Suspendisse ultricies, libero a ullamcorper volutpat, erat nunc sagittis tellus, sit amet bibendum diam mi sed justo. Integer ac ex a felis pretium malesuada et condimentum nunc. Proin vitae mauris ex. Quisque consectetur metus et sagittis fringilla. Morbi pretium libero sed enim scelerisque, accumsan venenatis ex consectetur.</p>
</main>

修改：添加了一个codepen here。