Twitter Bootstrap下拉菜单未显示

Question

My drop down menu nested inside of my main drop down menu won't display all of my information. I played around with it inside JSFiddle and still can't get it to work. If I click the user glyphicon to expand the options, it will get cut off at the bottom of the main menu size.

http://jsfiddle.net/2hGuv/

Here's the HTML

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ns-navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="ns-navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="~/">Home</a></li>
                    <li class="hidden-sm"><a href="~/event">Events</a></li>
                    <li class="hidden-sm"><a href="~/contest/enter">Contest</a></li>
                    <li><a href="~/magazine">Magazine</a></li>
                    <li><a href="~/contact">Contact</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Follow <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="http://visitor.r20.constantcontact.com/d.jsp?llr=zta6bgfab&amp;p=oi&amp;m=1105083662969" target="_blank">
                                    Join Our Mailing List
                                </a>
                            </li>
                            <li class="navbar-follow">
                                <div class="addthis_toolbox addthis_32x32_style addthis_default_style">
                                    <a class="addthis_button_facebook_follow" addthis:userid="nextstopmag"></a>
                                    <a class="addthis_button_twitter_follow" addthis:userid="nextstopmag"></a>
                                    <a class="addthis_button_linkedin_follow" addthis:userid="searles-media-inc." addthis:usertype="company"></a>
                                    <a class="addthis_button_google_follow" addthis:userid="+Nextstopmagazine"></a>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li class="dropdown visible-sm">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">More <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="~/event">Events</a></li>
                            <li><a href="~/contest/enter">Contest</a></li>
                            <li><a href="#" id="search" data-toggle="modal" data-target="#searchBox">Search</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> <b class="caret"></b></a>
                        <ul class="dropdown-menu">

                   <li><a href="~/account/dashboard">My Dashboard</a></li>
                            <li><a class="dropdown-toggle" href="~/account/manage">Manage Account</a></li>
                            <li><a href="~/account/logoff">Log off</a> </li>

                        </ul>

                    </li>
                    <li class="hidden-sm"><a href="#" id="search" data-toggle="modal" data-target="#searchBox"><span class="glyphicon glyphicon-search"></span></a></li>
                </ul>
            </div>
        </div>
    </nav>

Answer 1

Sounds like you have overflow: hidden; on your navbar. The fiddle seems to be working.