Hi all,

I have a navigation bar with dropdown items...on a desktop monitor the items display as I expect they would, taking all the room they need. However, when I view the web page on a mobile device and select the dropdown, the nav area turns scrollable, and the items remain in that content area. If there are more items to display, you have to scroll down in the content area to see them. Is there a way I can make them display outside the content area?

Code:
<nav id="navRegionTabs" class="navbar navbar-default container" style="background-color: palegoldenrod; border: none; margin-bottom: 1px; padding-bottom:1px" runat="server">
    <div class="col-xs-12">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#areaSubMenus" aria-expanded="true">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <div style="line-height: 45px;">
            <strong class="visible-xs" style="font-size: large">Area School Data:</strong>
        </div>
    </div>
    <div class="collapse navbar-collapse" id="areaSubMenus">
        <ul id="areaTabs" class="nav nav-tabs col-md-2" style="border:none" runat="server">
            <li id="liArea" class="dropdown" runat="server">
                <a id="areaName" class="dropdown-toggle" data-toggle="dropdown" href="#" runat="server" role="button" aria-haspopup="true" aria-expanded="true"></a>
                <ul class="dropdown-menu">
                    <asp:PlaceHolder ID="phAreaData" runat="server"></asp:PlaceHolder>
                </ul>
            </li>
        </ul>
    </div>
</nav>
mobile dropdown.jpg