title: Keep dropdown menu open while navigating child pages
body: <p>I am using bootstrap for my main nav and I have the dropdown-menu positioned horizontally when clicked, see screenshot below.</p>
  
  <p><img src="https://i.stack.imgur.com/arJL8.png" alt="enter image description here"></p>
  
  <p>Here is my nav so far.</p>
  
  <pre><code>&lt;section class="row"&gt;
    &lt;nav class="navbar navbar-default"&gt;
      &lt;div class="container-fluid"&gt;
        &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                  aria-expanded="false" aria-controls="navbar"&gt;
            &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;div id="navbar" class="navbar-collapse collapse"&gt;
          &lt;ul class="nav navbar-nav"&gt;
            &lt;li class="dropdown"&gt;
              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"&gt;about us
                &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;ul class="dropdown-menu" role="menu"&gt;
                &lt;li&gt;&lt;a href="about-us"&gt;about us&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="mission"&gt;mission&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="kari-olson"&gt;team&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li class="dropdown"&gt;
              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"&gt;impact &lt;span
                    class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;ul class="dropdown-menu" role="menu"&gt;
                &lt;li&gt;&lt;a href="cybercycle"&gt;CyberCycle&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="music"&gt;Music &amp; Memory&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="care-innovations"&gt;Care Innovations&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="mehca"&gt;MeHCA&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li class="dropdown"&gt;
              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"&gt;spotlight
                &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;ul class="dropdown-menu" role="menu"&gt;
                &lt;li&gt;&lt;a href="news"&gt;in the news&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="awards"&gt;awards / future&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li class="dropdown"&gt;
              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"&gt;resources
                &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;ul class="dropdown-menu" role="menu"&gt;
                &lt;li&gt;&lt;a href="partners"&gt;partners&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="media"&gt;videos &amp; photos&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="tools"&gt;tools &amp; reports&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="press"&gt;press releases&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="stories"&gt;impact stories&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li class="dropdown"&gt;
              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"&gt;get involved
                &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;ul class="dropdown-menu" role="menu"&gt;
                &lt;li&gt;&lt;a href="partner-with-us"&gt;partner with us&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="volunteer-with-us"&gt;volunteer with us&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;!--/.nav-collapse --&gt;
      &lt;/div&gt;
      &lt;!--/.container-fluid --&gt;
    &lt;/nav&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>What I am trying to do is keep the dropdown expanded while navigating the child pages of the parent so the site visitors aren't forced to keep clicking the 'impact' link to browse other child pages.  Any help would be greatly appreciated.  Thank you for your help.</p>