title: Unordered List Dropdown Submenu - Stay Activated When Clicked
body: <p>I'm working on the navbar for a site and for the menu it has an unordered list with submenus that are actived when the menu item is hovered over, but when you remove your mouse from the menu item to attempt to click on a submenu item the submenu dissapears. Is there a way with CSS/HTML to hover over it, then have the user click on it to keep it activated? If that's not possible, is it possible to change it to stay activated on a click without the preview on the hover?</p>
  
  <p>HTML:
   
          </p>
  
  <pre><code>        &lt;!-- Navbar --&gt;
          &lt;div class="header"&gt;
  
               &lt;div class="topbar"&gt;
                         &lt;ul class="list-inline"&gt;
                           &lt;li class="smallsocial"&gt;&amp;nbsp;&lt;/li&gt;&lt;li&gt;&amp;nbsp;&lt;/li&gt;
                                 &lt;li class="smallsocial"&gt; &lt;a href="https://www.facebook.com/prayingpelicanmissions" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Facebook"&gt;
                                      &lt;i class="fa fa-facebook"&gt;&lt;/i&gt;
                                  &lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li class="smallsocial"&gt;
                                  &lt;a href="https://plus.google.com/+PrayingpelicanmissionsOrg" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Google Plus"&gt;
                                      &lt;i class="fa fa-google-plus"&gt;&lt;/i&gt;
                                  &lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li class="smallsocial"&gt;
                                  &lt;a href="https://www.youtube.com/user/petepelican?sub_confirmation=1" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Youtube"&gt;
                                      &lt;i class="fa fa-youtube"&gt;&lt;/i&gt;
                                  &lt;/a&gt;
                              &lt;/li&gt;
  
                              &lt;li class="smallsocial"&gt;
                                  &lt;a href="https://twitter.com/PrayingPelican" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Twitter"&gt;
                                      &lt;i class="fa fa-twitter"&gt;&lt;/i&gt;
                                  &lt;/a&gt;
                              &lt;/li&gt;
  
                              &lt;li class="smallsocial"&gt;
                                  &lt;a href="https://www.instagram.com/prayingpelicanmissions/" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Instagram"&gt;
                                      &lt;i class="fa fa-instagram"&gt;&lt;/i&gt;
                                  &lt;/a&gt;&lt;/li&gt;&lt;li&gt;&amp;nbsp;&lt;/li&gt;
  
                              &lt;li class="pull-right"&gt;&lt;button class="btn btn-dark"&gt;&lt;a href="#"&gt;CONTACT US&lt;/a&gt;&lt;/button&gt;&lt;/li&gt;
                                &lt;li class="pull-right"&gt;&lt;button class="btn btn-dark"&gt;&lt;a href="https://www.prayingpelicanmissions.org/account/"&gt;LOGIN&lt;/a&gt;&lt;/button&gt;&lt;/li&gt;
                          &lt;/ul&gt;
  
  
  
               &lt;/div&gt;
                      &lt;!-- End Social Links --&gt;
  
               &lt;div class="navbar mega-menu" role="navigation"&gt;
                  &lt;div class="container"&gt;
                  &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
                      &lt;div class="menu-container"&gt;
                          &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse"&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;!-- Navbar Brand --&gt;
                          &lt;div class="navbar-brand"&gt;
                              &lt;a href="index.html"&gt;
                                  &lt;img class="default-logo" src="assets/img/whitelogo.png" alt="Logo"&gt;
                                  &lt;img class="shrink-logo" src="assets/img/blacklogo.png" alt="Logo"&gt;
                              &lt;/a&gt;
                          &lt;/div&gt;
                      &lt;!-- ENd Navbar Brand --&gt;
  
                      &lt;!-- Header Inner Right --&gt;
  
                      &lt;!-- End Header Inner Right --&gt;
                      &lt;/div&gt;
  
                  &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
                      &lt;div class="collapse navbar-collapse navbar-responsive-collapse"&gt;
                          &lt;div class="menu-container"&gt;
                              &lt;ul class="nav navbar-nav"&gt;
  
                              &lt;!-- Home --&gt;
                                  &lt;li class="dropdown"&gt;
                                      &lt;a href="javascript:void(0);" class="pull-right dropdown-toggle" data-toggle="dropdown"&gt;
                                      About Us
                                      &lt;/a&gt;
                                      &lt;ul class="dropdown-menu"&gt;
                                          &lt;li&gt;&lt;a href="index.html"&gt;Who We Are&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Partners&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Trip Media&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Trip Journals&lt;/a&gt;&lt;/li&gt;
                                          &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
                                          &lt;li&gt; &lt;a href="#"&gt;Donate&lt;/a&gt;&lt;/li&gt;
                                      &lt;/ul&gt;
                              &lt;!-- End Home --&gt;
  
                              &lt;!-- Shortcodes --&gt;
                                  &lt;li class="dropdown mega-menu-fullwidth"&gt;
  
                                      &lt;a href="javascript:void(0);" class="pull-right dropdown-toggle" data-toggle="dropdown"&gt;
                                      Locations
                                      &lt;/a&gt;
                                  &lt;ul class="dropdown-menu"&gt;
                                          &lt;li&gt;
                                          &lt;div class="mega-menu-content disable-icons"&gt;
                                              &lt;div class="container"&gt;
                                                  &lt;div class="row equal-height"&gt;
                                                      &lt;div class="col-md-3 equal-height-in"&gt;
                                                          &lt;ul class="list-unstyled equal-height-list"&gt;
                                                              &lt;li&gt;&lt;h3&gt;United States&lt;/h3&gt;&lt;/li&gt;
  
                                                              &lt;!-- Typography --&gt;
                                                              &lt;li class="location"&gt;&lt;a href="shortcode_typo_general.html"&gt;&lt;i&gt;&lt;/i&gt; Tucson, AZ&lt;/a&gt;&lt;/li&gt;
                                                              &lt;li class="location"&gt;&lt;a href="shortcode_typo_headings.html"&gt;&lt;i&gt;&lt;/i&gt;San Francisco, CA&lt;/a&gt;&lt;/li&gt;
                                                              &lt;li class="location"&gt;&lt;a href="shortcode_typo_dividers.html"&gt;&lt;i&gt;&lt;/i&gt; Miami, FL&lt;/a&gt;&lt;/li&gt;
                                                              &lt;li class="location"&gt;&lt;a href="shortcode_typo_blockquote.html"&gt;&lt;i&gt;&lt;/i&gt; Chicago, IL&lt;/a&gt;&lt;/li&gt;
                                                              &lt;li class="location"&gt;&lt;a href="shortcode_typo_boxshadows.html"&gt;&lt;i&gt;&lt;/i&gt; Boston, MA&lt;/a&gt;&lt;/li&gt;
                                                              &lt;li class="location"&gt;&lt;a href="shortcode_typo_testimonials.html"&gt;&lt;i&gt;&lt;/i&gt;Minneapolis, MN&lt;/a&gt;&lt;/li&gt;
                                                              &lt;li class="location"&gt;&lt;a href="shortcode_typo_tagline_boxes.html"&gt;&lt;i&gt;&lt;/i&gt; Pittsburg, PA&lt;/a&gt;&lt;/li&gt;
                                                              &lt;li class="location"&gt;&lt;a href="shortcode_typo_grid.html"&gt;&lt;i&gt;&lt;/i&gt; Providence, RI&lt;/a&gt;&lt;/li&gt;
                                                              &lt;li class="location"&gt;&lt;a href="shortcode_typo_grid.html"&gt;&lt;i&gt;&lt;/i&gt; Memphis, TN&lt;/a&gt;&lt;/li&gt;
                                                              &lt;li class="location"&gt;&lt;a href="shortcode_typo_grid.html"&gt;&lt;i&gt;&lt;/i&gt;US Reservations&lt;/a&gt;&lt;/li&gt;
                                                              &lt;!-- End Typography --&gt;
                                                          &lt;/ul&gt;
                                                      &lt;/div&gt;
                                                      &lt;div class="col-md-3 equal-height-in"&gt;
                                                          &lt;ul class="list-unstyled equal-height-list"&gt;
                                                              &lt;li&gt;&lt;h3&gt;CENTRAL AMERICA&lt;/h3&gt;&lt;/li&gt;
  
                                                              &lt;!-- Buttons --&gt;
                                                              &lt;li class="location"&gt;&lt;a href="shortcode_btn_general.html"&gt;&lt;i&gt;&lt;/i&gt;Belize&lt;/a&gt;&lt;/li&gt;
                                                              &lt;li class="location"&gt;&lt;a href="shortcode_btn_brands.html"&gt;&lt;i&gt;&lt;/i&gt;Costa Rica&lt;/a&gt;&lt;/li&gt;
                                                              &lt;li class="location"&gt;&lt;a href="shortcode_btn_effects.html"&gt;&lt;i&gt;&lt;/i&gt;Guatemala&lt;/a&gt;&lt;/li&gt;
                                                              &lt;li class="location"&gt;&lt;a href="shortcode_btn_effects.html"&gt;&lt;i&gt;&lt;/i&gt;Mexico&lt;/a&gt;&lt;/li&gt;
                                                              &lt;li class="location"&gt;&lt;a href="shortcode_btn_effects.html"&gt;&lt;i&gt;&lt;/i&gt;Nicaragua&lt;/a&gt;&lt;/li&gt;
                                                              &lt;!-- End Buttons --&gt;
  
  
                                                          &lt;/ul&gt;
                                                      &lt;/div&gt;
  
                                                      &lt;div class="col-md-3 equal-height-in"&gt;
                                                          &lt;ul class="list-unstyled equal-height-list"&gt;
                                                              &lt;li&gt;&lt;h3&gt;CARIBBEAN&lt;/h3&gt;&lt;/li&gt;
  
                                                              &lt;!-- Buttons --&gt;
                                                              &lt;li class="location"&gt;&lt;a href="shortcode_btn_general.html"&gt;&lt;i&gt;&lt;/i&gt;Bahamas&lt;/a&gt;&lt;/li&gt;
                                                              &lt;li class="location"&gt;&lt;a href="shortcode_btn_brands.html"&gt;&lt;i&gt;&lt;/i&gt;Cuba&lt;/a&gt;&lt;/li&gt;
                                                              &lt;li class="location"&gt;&lt;a href="shortcode_btn_effects.html"&gt;&lt;i&gt;&lt;/i&gt;Dominican Republic&lt;/a&gt;&lt;/li&gt;
                                                              &lt;li class="location"&gt;&lt;a href="shortcode_btn_effects.html"&gt;&lt;i&gt;&lt;/i&gt;Haiti&lt;/a&gt;&lt;/li&gt;
                                                              &lt;li class="location"&gt;&lt;a href="shortcode_btn_effects.html"&gt;&lt;i&gt;&lt;/i&gt;Jamaica&lt;/a&gt;&lt;/li&gt;
                                                              &lt;li class="location"&gt;&lt;a href="shortcode_btn_effects.html"&gt;&lt;i&gt;&lt;/i&gt;Puerto Rico&lt;/a&gt;&lt;/li&gt;
                                                              &lt;!-- End Buttons --&gt;
  
  
                                                          &lt;/ul&gt;
                                                      &lt;/div&gt;
  
                                                      &lt;div class="col-md-3 equal-height-in"&gt;
                                                          &lt;ul class="list-unstyled equal-height-list"&gt;
                                                              &lt;li&gt;&lt;h3&gt;AFRICA/EUROPE&lt;/h3&gt;&lt;/li&gt;
  
                                                              &lt;!-- Buttons --&gt;
                                                              &lt;li class="location"&gt;&lt;a href="shortcode_btn_general.html"&gt;&lt;i&gt;&lt;/i&gt;Italy&lt;/a&gt;&lt;/li&gt;
                                                              &lt;li class="location"&gt;&lt;a href="shortcode_btn_brands.html"&gt;&lt;i&gt;&lt;/i&gt;Ghana&lt;/a&gt;&lt;/li&gt;
                                                              &lt;li class="location"&gt;&lt;a href="shortcode_btn_effects.html"&gt;&lt;i&gt;&lt;/i&gt;South Africa&lt;/a&gt;&lt;/li&gt;
  
                                                              &lt;!-- End Buttons --&gt;
  
  
                                                          &lt;/ul&gt;
                                                      &lt;/div&gt;
  
                                                  &lt;/div&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                              &lt;!-- End Shortcodes --&gt;
  
                              &lt;!-- Demo Pages --&gt;
                              &lt;li class=""&gt;
                                  &lt;a href="http://www.prayingpelicanmissions.org/journals"&gt;
                                      Trip Journals
                                  &lt;/a&gt;
                              &lt;/li&gt;
                             &lt;li class=".button12"&gt;
                                  &lt;a href="http://www.prayingpelicanmissions.org/mission-trip-registration"&gt;
                                      &lt;button type="button" class="btn btn-default"&gt;REGISTER FOR A TRIP&lt;/button&gt;
                                  &lt;/a&gt;
                              &lt;/li&gt;
                              &lt;div class="header-inner-right"&gt;
  
  
                              &lt;li class="menu-icons"&gt;
                                  &lt;i class="menu-icons-style search search-close search-btn fa fa-search"&gt;&lt;/i&gt;
                                  &lt;div class="search-open"&gt;
                                      &lt;input type="text" class="animated fadeIn form-control" placeholder="Start searching ..."&gt;
                                  &lt;/div&gt;
                              &lt;!-- End Demo Pages --&gt;
                          &lt;/ul&gt;
  
                  &lt;!--/navbar-collapse--&gt;
                              &lt;/div&gt;
                       &lt;/div&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;/div&gt;  &lt;!-- End Navbar --&gt;
  </code></pre>