0
我正在为网站的导航栏和菜单，它有一个无序列表与子菜单，当菜单项悬停时，但当您删除鼠标从菜单项尝试点击子菜单项子菜单消失。有没有一种方法可以将CSS/HTML悬停在它上面，然后让用户点击它来保持它被激活？如果这是不可能的，是否有可能将其更改为保持激活状态而不需要预览悬停？无序列表下拉子菜单 - 保持激活点击时
HTML：
<!-- Navbar -->
<div class="header">
<div class="topbar">
<ul class="list-inline">
<li class="smallsocial"> </li><li> </li>
<li class="smallsocial"> <a href="https://www.facebook.com/prayingpelicanmissions" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Facebook">
<i class="fa fa-facebook"></i>
</a>
</li>
<li class="smallsocial">
<a href="https://plus.google.com/+PrayingpelicanmissionsOrg" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Google Plus">
<i class="fa fa-google-plus"></i>
</a>
</li>
<li class="smallsocial">
<a href="https://www.youtube.com/user/petepelican?sub_confirmation=1" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Youtube">
<i class="fa fa-youtube"></i>
</a>
</li>
<li class="smallsocial">
<a href="https://twitter.com/PrayingPelican" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Twitter">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="smallsocial">
<a href="https://www.instagram.com/prayingpelicanmissions/" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Instagram">
<i class="fa fa-instagram"></i>
</a></li><li> </li>
<li class="pull-right"><button class="btn btn-dark"><a href="#">CONTACT US</a></button></li>
<li class="pull-right"><button class="btn btn-dark"><a href="https://www.prayingpelicanmissions.org/account/">LOGIN</a></button></li>
</ul>
</div>
<!-- End Social Links -->
<div class="navbar mega-menu" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="menu-container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Navbar Brand -->
<div class="navbar-brand">
<a href="index.html">
<img class="default-logo" src="assets/img/whitelogo.png" alt="Logo">
<img class="shrink-logo" src="assets/img/blacklogo.png" alt="Logo">
</a>
</div>
<!-- ENd Navbar Brand -->
<!-- Header Inner Right -->
<!-- End Header Inner Right -->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-responsive-collapse">
<div class="menu-container">
<ul class="nav navbar-nav">
<!-- Home -->
<li class="dropdown">
<a href="javascript:void(0);" class="pull-right dropdown-toggle" data-toggle="dropdown">
About Us
</a>
<ul class="dropdown-menu">
<li><a href="index.html">Who We Are</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Trip Media</a></li>
<li><a href="#">Trip Journals</a></li>
<li role="separator" class="divider"></li>
<li> <a href="#">Donate</a></li>
</ul>
<!-- End Home -->
<!-- Shortcodes -->
<li class="dropdown mega-menu-fullwidth">
<a href="javascript:void(0);" class="pull-right dropdown-toggle" data-toggle="dropdown">
Locations
</a>
<ul class="dropdown-menu">
<li>
<div class="mega-menu-content disable-icons">
<div class="container">
<div class="row equal-height">
<div class="col-md-3 equal-height-in">
<ul class="list-unstyled equal-height-list">
<li><h3>United States</h3></li>
<!-- Typography -->
<li class="location"><a href="shortcode_typo_general.html"><i></i> Tucson, AZ</a></li>
<li class="location"><a href="shortcode_typo_headings.html"><i></i>San Francisco, CA</a></li>
<li class="location"><a href="shortcode_typo_dividers.html"><i></i> Miami, FL</a></li>
<li class="location"><a href="shortcode_typo_blockquote.html"><i></i> Chicago, IL</a></li>
<li class="location"><a href="shortcode_typo_boxshadows.html"><i></i> Boston, MA</a></li>
<li class="location"><a href="shortcode_typo_testimonials.html"><i></i>Minneapolis, MN</a></li>
<li class="location"><a href="shortcode_typo_tagline_boxes.html"><i></i> Pittsburg, PA</a></li>
<li class="location"><a href="shortcode_typo_grid.html"><i></i> Providence, RI</a></li>
<li class="location"><a href="shortcode_typo_grid.html"><i></i> Memphis, TN</a></li>
<li class="location"><a href="shortcode_typo_grid.html"><i></i>US Reservations</a></li>
<!-- End Typography -->
</ul>
</div>
<div class="col-md-3 equal-height-in">
<ul class="list-unstyled equal-height-list">
<li><h3>CENTRAL AMERICA</h3></li>
<!-- Buttons -->
<li class="location"><a href="shortcode_btn_general.html"><i></i>Belize</a></li>
<li class="location"><a href="shortcode_btn_brands.html"><i></i>Costa Rica</a></li>
<li class="location"><a href="shortcode_btn_effects.html"><i></i>Guatemala</a></li>
<li class="location"><a href="shortcode_btn_effects.html"><i></i>Mexico</a></li>
<li class="location"><a href="shortcode_btn_effects.html"><i></i>Nicaragua</a></li>
<!-- End Buttons -->
</ul>
</div>
<div class="col-md-3 equal-height-in">
<ul class="list-unstyled equal-height-list">
<li><h3>CARIBBEAN</h3></li>
<!-- Buttons -->
<li class="location"><a href="shortcode_btn_general.html"><i></i>Bahamas</a></li>
<li class="location"><a href="shortcode_btn_brands.html"><i></i>Cuba</a></li>
<li class="location"><a href="shortcode_btn_effects.html"><i></i>Dominican Republic</a></li>
<li class="location"><a href="shortcode_btn_effects.html"><i></i>Haiti</a></li>
<li class="location"><a href="shortcode_btn_effects.html"><i></i>Jamaica</a></li>
<li class="location"><a href="shortcode_btn_effects.html"><i></i>Puerto Rico</a></li>
<!-- End Buttons -->
</ul>
</div>
<div class="col-md-3 equal-height-in">
<ul class="list-unstyled equal-height-list">
<li><h3>AFRICA/EUROPE</h3></li>
<!-- Buttons -->
<li class="location"><a href="shortcode_btn_general.html"><i></i>Italy</a></li>
<li class="location"><a href="shortcode_btn_brands.html"><i></i>Ghana</a></li>
<li class="location"><a href="shortcode_btn_effects.html"><i></i>South Africa</a></li>
<!-- End Buttons -->
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<!-- End Shortcodes -->
<!-- Demo Pages -->
<li class="">
<a href="http://www.prayingpelicanmissions.org/journals">
Trip Journals
</a>
</li>
<li class=".button12">
<a href="http://www.prayingpelicanmissions.org/mission-trip-registration">
<button type="button" class="btn btn-default">REGISTER FOR A TRIP</button>
</a>
</li>
<div class="header-inner-right">
<li class="menu-icons">
<i class="menu-icons-style search search-close search-btn fa fa-search"></i>
<div class="search-open">
<input type="text" class="animated fadeIn form-control" placeholder="Start searching ...">
</div>
<!-- End Demo Pages -->
</ul>
<!--/navbar-collapse-->
</div>
</div>
</div>
</div>
</div> <!-- End Navbar -->
请张贴你到目前为止 –
请检查代码[问] – Fencer04