我想在悬停时打开下拉菜单。我已经创建了它并在悬停时打开但是当我想从菜单中选择选项时它突然关闭

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-menu) 之间存在空间。

将 .dropdown-menu 的 margin-top css 更改为 0 即可：

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