Css 在“引导导航打开”下拉列表中模拟导航折叠动画

当导航开关出现在979px下时，使用标准的bootstrap2nav collapse标记在“collapse”类的高度上使用了一个很好的转换。我想将相同的转换应用于“下拉”类的全宽度和折叠宽度

您可以在此处看到当前效果：当您将浏览器大小设置为760px以下时

我所追求的效果是在右上角单击主切换按钮时的过渡。你会注意到，如果你点击它下面的“下拉”链接，就没有转换。我想让它们搭配起来

我的标记在下面。同样，这是使用引导2

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>

            <!-- Be sure to leave the brand out there if you want it shown -->
            <a class="brand" href="#"><img src="images/image.png" alt=""></a>

            <!-- Everything you want hidden at 940px or less, place within here -->
              <div class="nav-collapse collapse">

                <ul class="nav">
                  <li><a href="#">Link 1</a></li>
                  <li><a href="#">Link 2</a></li>
                  <li class="active"><a href="#">Active page</a></li>
                  <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Toggle link</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Sub link 1</a></li>
                        <li><a href="#">Sub link 2</a></li>
                        <li><a href="#">Sub link 3</a></li>
                        <li><a href="#">Sub link 4</a></li>
                        <li><a href="#">Sub link 5</a></li>
                    </ul>
                  </li>
                </ul>


              </div>
        </div>
    </div>
</div>