我想打開懸停下拉菜單。我創建了它，它打開懸停，但是當我想從菜單中選擇選項，它突然關閉

Question

我想打開懸停下拉菜單。我已經創建了它，它懸停時會打開，但是當我想從菜單中選擇選項時，它會突然關閉。如何在懸停時打開下拉菜單？懸停時，我想打開它，然後懸停在選項上也要打開它。

.navbar-default .navbar-nav > li {margin-left: 6px;} 
.navbar-default .navbar-nav > li:first-child {margin-left: 0;} 

.navbar-default .navbar-nav > li > a {font-family: 'Abel', sans-serif;color:#fff;display:block;font-size:17px;font-weight:400;padding:30px 10px;text-transform:uppercase;overflow: hidden;transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;} 

.navbar-default .navbar-nav > li > a.active, .navbar-default .navbar-nav > li:hover > a {color:#FFFFFF;background:#fbba00;} 
.navbar-default .navbar-nav > li > a.active:after {opacity: 1;} 

.navbar-default .navbar-nav > li > a i{font-size:2em;color:#fff;margin-left:2px;line-height: 0;margin-left:4px;position: relative;top:5px;} 
.navbar-default .navbar-nav > li > a:hover i{color:#fff;} 


.navbar-default .navbar-nav > li.drop:hover .dropdown { 
    visibility: visible; 
    opacity: 1; 
} 

.dropdown li, .sup-dropdown li { 
    position: relative; 
    border-top: 1px solid rgba(0, 0, 0, 0.04); 
} 

.dropdown li:first-child, .sup-dropdown li:first-child { 
    border-top: none; 
} 

.dropdown li a, .sup-dropdown li a { 
    display: block; 
    color: #fff; 
    font-size:13px; 
    font-family: 'Roboto', sans-serif; 
    padding:8px 14px; 
    font-weight:400; 
    text-decoration: none; 
    text-transform: capitalize; 
    transition: padding 0.2s ease-in-out; 
    -moz-transition: padding 0.2s ease-in-out; 
    -webkit-transition: padding 0.2s ease-in-out; 
    -o-transition: padding 0.2s ease-in-out; 
    text-transform:uppercase; 
} 


.dropdown > li:hover > a, .sup-dropdown li:hover > a { 
    padding-left: 18px; 
    background-color:#FFF; 
    color:#373d43; 
} 

.dropdown li a i { 
    margin: 0 0 0 -4px; 
} 

.dropdown:hover .dropdown-menu { 
    display: block; 
} 

.navbar-default .navbar-nav .sup-dropdown { 
    position: absolute; 
    left: 100%; 
    top: 0; 
    width: 180px; 
    background-color: #fff; 
    margin-top: 10px; 
    transition: margin-top 0.2s ease-in-out; 
    -moz-transition: margin-top 0.2s ease-in-out; 
    -webkit-transition: margin-top 0.2s ease-in-out; 
    -o-transition: margin-top 0.2s ease-in-out; 
    visibility: hidden; 
    z-index: 3; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
    -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
} 

.navbar-default .navbar-nav li.drop .dropdown li:hover .sup-dropdown { 
    visibility: visible; 
    margin-top: 0; 
} 

<div id="navbar" class="navbar-collapse collapse" > 
       <ul class="nav navbar-nav navbar-right"> 
        <li class="dropdown" > 
         <a class="dropdown-toggle" aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" href="#">Get started<i class="fa fa-angle-down"></i></a> 
          <ul class="dropdown-menu"> 
          <li><a <?php if(!is_page('home')){ ?> href="<?php echo site_url(); ?>" <?php } else { ?> id="anchor" <?php } ?> >SITE FINDER</a></li> 

          <li><a href="<?php echo site_url();?>/resources/">LOCAL ADVERTISING GUIDE</a></li> 
          </ul> 
        </li> 
        <li class="dropdown" > 
         <a class="dropdown-toggle" aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" href="#">adnozzles<i class="fa fa-angle-down"></i></a> 
          <ul class="dropdown-menu"> 
          <li><a href="<?php echo site_url();?>/adnozzles/">HOW IT WORKS</a></li> 
          <li><a href="<?php echo site_url();?>/testimonials/">TESTIMONIALS</a></li> 
          <li><a href="<?php echo site_url();?>/test/gallery/">GALLERY</a></li> 
          </ul> 
        </li> 
       </ul> 
      </div> 

Answer 1

那是因爲你的導航鏈接，您的列表（.dropdown菜單）之間的空間。

變化.dropdown菜單的保證金頂CSS爲0，它會工作：

.navbar-nav > li > .dropdown-menu { 
    margin-top: 0px; 
    padding-top: 10px; // add some padding, so you keep the same style 
}