Javascript 单击导航栏按钮时标题未展开

我使用的是可折叠的引导导航。我对a.css做了一些修改，使导航链接看起来像选项卡。使用边距属性在标题底部定位链接不起作用，因为放大和缩小导航时，有时会上下按一个像素。相反，我将position属性设置为absolute，以将导航放置在hader的底部。现在当我点击导航栏按钮。导航被向上推，而不是向下推，标题未展开

这是我的HTML：

<div class="header-inner clearfix">
    <nav class="navigation pull-right" role="navigation">
        <div class="navbar pull-right">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            </a>
        </div>
        <div class="nav-collapse in collapse" style="height: auto;">
            <ul class="nav menu nav-pills">
                <li>
                    <a>link1</a>
                </li>
                <li>
                    <a>link2</a>
                </li>
                <li>
                <a>link3</a>
                </li>
            </ul>
        </div>
    </nav>
</div>

---

我希望这个问题可以解决，使用不同的单位设置不同于像素的导航边距。如果没有，我如何更改.js文件。

谢谢，我已经解决了一个问题。当屏幕宽度小于900像素时，当导航栏上出现导航按钮时，我只需将position属性设置为static，现在一切正常。

---

无论如何，谢谢你。

我不能清楚地理解你的问题。你能不能把这个和你正在加载的所有其他资源一起放到codepen中，这样我就可以玩了？请提供一个工作片段CSS 101：绝对定位将元素从正常的布局流中移除，这样它就不能再影响其祖先的高度了。

.nav-pills > li > a {
    border-width: 2px 2px 0 2px;
    border-radius: 5px 5px 0 0;
    border-color: #cc0000;
    border-style: solid;
    padding: 8px 12px 8px 12px;
}

.header-inner {
    border-bottom: 2px solid #cc0000;
    position: relative
}

.navigation {
    position: absolute;
    bottom: 0;
}