Javascript 在固定宽度内进行响应式导航

我正在为我的网站使用一个名为Naver（）的响应导航解决方案。然而，当我在固定宽度（比如网格）中使用响应导航时，我遇到了一些问题。响应导航采用其父元素的宽度，不会以100%宽度显示

以下是两个示例，一个导航位于网格内，另一个只是向右浮动：

注意：我在每个小提琴中都有一些外部资源

我想知道如何调整我的CSS或JavaScript，使我的响应下拉列表在点击时100%显示，无论父元素的宽度如何

HTML

<div class="clearfix">
    <div class="float-left">
        <a href="http://concisecss.com">
                <img src="http://concisecss.com/images/logo.svg" alt="Concise Logo" width="150" />
            </a>
    </div>

    <div class="float-right">
        <nav class="nav-responsive">
            <ul class="list-inline list-unstyled">
                <li><a href="">Welcome</a>

                </li>
                <li><a href="">Why Concise</a>

                </li>
                <li><a href="">Get Started</a>

                </li>
                <li><a href="">Documentation</a>

                </li>
                <li><a href="">Add-Ons</a>

                </li>
            </ul>
        </nav>
    </div>
</div>

---

Naver jQuery库：

使用下面的CSS。我希望这对您有用：

CSS

.naver .naver-handle {
    color: inherit;
    cursor: pointer;
    display: none;
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 1;
    text-align: right;
    text-transform: uppercase;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.naver .naver-wrapper {
    height: auto;
}
.naver.enabled .naver-handle {
    display: block;
}
.naver.enabled .naver-wrapper {
    height: 0px;
    overflow: hidden;
}
.naver.enabled .naver-wrapper ul li {
    display: block;
    padding: 8px;
    text-align: left;
    width: 100%;
}
.naver.enabled .naver-wrapper ul li:hover {
    background: #f9f9f9;
}
.nav-responsive.naver .naver-handle:after {
    content:"\f0c9";
    font-family: FontAwesome;
    text-align: right;
}

.naver.enabled .naver-wrapper{
overflow: hidden;  position: absolute; left: 0px; width: 100%; }

---

您需要给出导航和它的顶部容器

宽度
的
100%
。通过这样做，您可以保证两者都将占据屏幕宽度的100%（或两者所在的容器中的任何内容）

对于第一个JSFIDLE，请使用
.naver-wrapper{width:100%；}
，因为
naver-wrapper
是导航的顶级父项

在第二个示例中，您必须同时提供导航和顶部容器（父容器）
width:100%

.naver-wrapper{width:100%;}
.float-right{width:100%;}