我的导航栏里有一个下拉菜单，但是它有很多子菜单项。在大屏幕上这是很好的，但是当导航栏被折叠时，它们就不那么重要了，不需要占用所有的空间。
有没有办法在下拉列表折叠时将其关闭，或者删除下拉列表和子项，并将其替换为锚标记（它将转到用户可以选择子项的页面）？或者我的想法完全错误？

<!-- Navbar -->
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
    <div class="container">

       <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <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>

        <a class="brand" href="/">mybrand</a>
        <div class="nav-collapse">
        <ul class="nav">
            <li<{if $contenttemplate == "option1"}> class="active" <{/if}>><a href="/">option1</a></li>
            <li<{if $contenttemplate == "option2"}> class="active" <{/if}>><a href="/option2">option2</a></li>
            <li<{if $contenttemplate == "option3"}> class="active" <{/if}>><a href="/option3">option3</a></li>
            <li<{if $contenttemplate == "dropdown"}> class="dropdown active" style="background-color:rgba(0,0,0,0.5);"
            <{else}> class="dropdown"<{/if}>>
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">lists<b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="/lists/number1">number1</a></li>
                <li><a href="/lists/number2">number2</a></li>
                <li><a href="/lists/number3">number3</a></li>
                <li><a href="/lists/number4">number4</a></li>
            </ul>
            </li>
        </ul>
        </div><!--/.nav-collapse -->
    </div>
    </div>
</div>