个人中心
gpt4 book ai didi

html - Bootstrap Yamm Navbar 悬停时出现故障

转载 作者：行者123 更新时间：2023-11-28 15:27:38 26 4
gpt4 key购买 nike

我目前正在为慈善机构重新设计一个网站，使用带有 Bootstrap 的 YAMM Navbar，我有一个奇怪的情况，如果我只在 Bootply 上测试 Navbar 和 CSS 代码，它工作得很好——但是当把它放在我的网络服务器，它会因“悬停效果”而出现故障(因此导航栏会在悬停时下降)。就“故障”而言(在我的网络服务器上)，菜单会在悬停时下拉，但是当您将鼠标向下移动到下拉菜单时 - 它会立即消失。

为了半说服自己这不是我托管的 Web 服务器的问题，我还在 LAMP Stack VM 上运行了它，同样的事情发生了。但在 Bootply 上，代码运行完美，没有“故障”。

首先，这是一个指向 Bootply 的链接，其中导航栏悬停功能正常； Bootply code

这是指向我的网络服务器上的站点的链接(导航栏在悬停时出现故障): WebServer

这是我的索引页面的实际代码(注意 - 该网站使用 Angular，带有索引，所以它只是用作模板的页眉和页脚。另请注意，它确实包含很多遗留代码，这网站完成后将被清理)。

<!DOCTYPE html>
<html lang="en" data-ng-app='myApp'>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="INDEX, FOLLOW">
    <meta name="Keywords" content="OpenHouse Christian Involvement Centre, OpenHouse, Christian, Involvement, Centre, Melbourne, Macleod">
    <meta name="description" content="Open House, Christian Involvement Centres">
    <meta name="author" content="*******">
    <meta name="google-site-verification" content="Wp-AVOainmBYwLoJRfZ4dZif0GWjK4wZYGK8WbBOZ8k" />
    <link rel="icon" href="images/favicon.ico">

    <title>Open House</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="css/sticky-footer.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/nanogallery.css" rel="stylesheet" type="text/css">
    <link href="css/nanogallery.min.css" rel="stylesheet" type="text/css">
    <link href="css/nanogallery_clean.css" rel="stylesheet" type="text/css">

    <!-- nanoGALLERY - css file for the theme 'light'                                                                         -->
      <link href="css/nanogallery_light.css" rel="stylesheet" type="text/css">

    <!-- Yamm styles-->
    <link href="css/yamm.css" rel="stylesheet" type="text/css">

    <!-- Lightbox Gallery (for Youtube Videos) - css files -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.1.1/ekko-lightbox.css" rel="stylesheet" type="text/css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.1.1/ekko-lightbox.min.css" rel="stylesheet" type="text/css">

    <!-- BXslider - css file -->
    <link href="css/jquery.bxslider.css" rel="stylesheet">

    <!-- Animate CSS -->
    <link rel="stylesheet" href="css/animate.css" />
    <!--<link rel="stylesheet" href="css/demo.css" />-->

    <!-- Basic Smooth jquery Accordion -->
    <!--<link href="css/jquery.bbAccordion.css" rel="stylesheet">-->


    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- ===== Google Fonts ===== -->
    <!--<link href="https://fonts.googleapis.com/css?family=Calligraffitti|Kaushan+Script|Sofia" rel="stylesheet">-->
    <link href="https://fonts.googleapis.com/css?family=Lato:700i" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,800" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">

<!--</head>-->

<!--<body>-->
<style>
/* ==== Custom CSS for the Donations Button ==== */
/*#donationBtn:hover, #donationBtn:focus, #donationBtn:active {color: #337ab7 !important;}*/
#donationBtn:hover, #donationBtn:focus, #donationBtn:active {background-color: #225e91 !important;}

#lnkMail {
    unicode-bidi: bidi-override;
    direction: rtl;
}

/* menu styes */
/*.list-unstyled,
.list-unstyled ul { min-width: 120px }

@media ( min-width: 767px ) {
  .panel-group { width: 400px; }
  .thumbnail { margin: 0; }
}*/

/* === Footer === */
.copyright {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8em;
  letter-spacing: 0.225em;
  list-style: none;
  padding: 0;
  text-transform: uppercase;
}

.copyright-icons {
  font-size: 2.25em;
  /*padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;*/
}

 .copyright-icons a {
    color: rgba(255, 255, 255, 0.5);
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
  }

 .copyright-icons a:hover {
      color: #fff;
    }

/* Footer */

    #footer {
        padding: 6em 0 4em 0 ;
        background-color: #1d242a;
        text-align: center;
    }

        #footer .icons {
            font-size: 1.25em;
        }

            #footer .icons a {
                color: rgba(255, 255, 255, 0.5);
            }

                #footer .icons a:hover {
                    color: #fff;
                }

        #footer .copyright {
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.8em;
            letter-spacing: 0.225em;
            list-style: none;
            padding: 0;
            text-transform: uppercase;
        }

            #footer .copyright li {
                border-left: solid 1px rgba(255, 255, 255, 0.5);
                display: inline-block;
                line-height: 1em;
                margin-left: 1em;
                padding-left: 1em;
            }

                #footer .copyright li:first-child {
                    border-left: 0;
                    margin-left: 0;
                    padding-left: 0;
                }

                #footer .copyright li a {
                    color: inherit;
                }

                    #footer .copyright li a:hover {
                        color: #fff;
                    }

                @media screen and (max-width: 480px) {

                    #footer .copyright li {
                        border: 0;
                        display: block;
                        line-height: 1.65em;
                        margin: 0;
                        padding: 0.5em 0;
                    }

                }

        @media screen and (max-width: 980px) {

            #footer {
                padding: 4em 3em 2em 3em ;
            }

        }

        @media screen and (max-width: 736px) {

            #footer {
                padding: 3em 2em 1em 2em ;
            }

        }

/*.navbar {
  border: 0;
  font-family: 'Roboto', sans-serif !important;
}*/

.navbar-default {
  background-color: #ffffff; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(white, transparent); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(white, transparent); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(white, transparent); /* For Firefox 3.6 to 15 */
  background: linear-gradient(white, rgba(255,255,255,0.3)); /* Standard syntax (must be last) */
  /*color: #337ab7 !important;*/
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}

/*
.navbar-default {
  color: #000000 !important;
}

.sidebar-nav {
    padding: 9px 0;
}

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
}

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

.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
    margin-top: 0;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
} */

/*.dropdown-menu > li > a:hover {
    color: white;
    background-color: #337ab7;
    background-image: none;
}*/

/* ==== Custom Change for Navbar Collapse ==== */
/*@media (max-width: 994px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(51,102,153,0.1);
        background-color: white;
    }
    .navbar-fixed-top {
            top: 0;
            border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
            margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}*/
.yamm .nav, .yamm .collapse, .yamm .dropup, .yamm .dropdown {
   position: static;
}

.yamm .container {
   position: relative;
}

.yamm .dropdown-menu {
   left: auto;
}

.yamm .yamm-content {
  padding: 3px 15px 3px;
}

.yamm .yamm-content .a:hover {
  text-decoration: none;
}

a.nounderline {
  text-decoration: none;
  font-weight: 400;
  color: #333;
  line-height: 1.42857143;
}

a.nounderline:hover {
  color: #225e91;
  font-weight: bold;
}

.dropdown-menu > li > a:hover {
    color: #225e91;
    background-color: white;
    background-image: none;
    font-weight: bold;
}

.navbar-default .navbar-nav > li > a:hover {
  color: #225e91;
  background-color: white;
  background-image: none;
  border-bottom-style: solid;
  border-bottom-color: #225e91;
}

/*.navbar-default .navbar-nav > li.dropdown:hover > a,
.navbar-default .navbar-nav > li.dropdown:hover > a:hover,
.navbar-default .navbar-nav > li.dropdown:hover > a:focus {
    background-color: rgb(231, 231, 231);
    color: rgb(85, 85, 85);
}*/

/*li.dropdown:hover > .dropdown-menu {
    display: block;
}*/

@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

/*.dropdown-menu > li > a:hover {
  color: #225e91;
  font-weight: bold;
  background-color: none !important;
}

.dropdown-menu > li:hover {
  background-color: none !important;
}*/


img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto
}

</style>
</head>

<body>

  <!-- ============ START NAVBAR =========== -->
  <nav class="navbar yamm navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
         <!--<button type="button" data-toggle="collapse" data-target="#navbar-collapse-1" class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="#" class="navbar-brand">Yamm Megamenu</a>-->
           <!--<span class="sr-only">Toggle navigation</span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
         </button>-->
         <a href="#/" class="pull-left"><img src="images/logo-new.png" alt="Open House logo"></a>
      </div>
      <div id="navbar-collapse-1" class="navbar-collapse collapse">
        <ul class="nav navbar-nav" style="float:right;">

          <!-- Home Menu -->
          <li class="dropdown"><a href="" data-toggle="dropdown" class="dropdown-toggle"><strong>Home</strong><b class="caret"></b></a>
            <ul class="dropdown-menu" id="menu1">
              <li><a href="documents/Newsletters/Newsletter_June_2017.pdf" target="_blank">Latest News</a></li>
              <li><a href="#events">Coming Events</a></li>
              <li><a href="#involved">Get Involved</a></li>
              <li><a href="#partners">Partners</a></li>
              <li><a href="#ceo">CEO Message</a></li>
              <li><a href="#bibleRead">Bible Reading</a></li>
              <li><a href="#pray">Pray For Us</a></li>
            </ul>
          </li>

           <!-- About Us Menu -->
           <!-- Classic list -->
           <!-- Classic list -->
             <li class="dropdown yamm-fw"><a href="" data-toggle="dropdown" class="dropdown-toggle"><strong>About Us</strong><b class="caret"></b></a>
               <ul class="dropdown-menu" role="menu">
                 <li>
                   <!-- Content container to add padding -->
                   <div class="yamm-content">
                     <div class="row">
                       <ul class="col-lg-4 list-unstyled" style="line-height:1.42857143;">
                         <li>
                           <h4 style="color:#225e91;"><strong>Who We Are</strong></h4>
                         </li>
                         <li ><a href="#origins" class="nounderline" style="padding-top: 3px; padding-bottom: 3px;">Our Origins</a></li>
                         <li><a href="#ourhistory" class="nounderline" style="padding-top: 3px; padding-bottom: 3px;">Our History</a></li>
                         <li><a href="#what" class="nounderline">What We Do</a></li>
                         <li><a href="#why" class="nounderline">Why We Do It</a></li>
                         <li><a href="documents/Strategic_Plan-promotional.pdf" target="_blank" class="nounderline">Strategic Plan</a></li>

                       </ul>
                       <ul class="col-lg-4 list-unstyled">
                         <li>
                           <h4 style="color:#225e91;"><strong>Our People</strong></h4>
                         </li>
                         <li><a href="#board" class="nounderline">Our Board</a></li>
                         <li><a href="#team" class="nounderline">Our Team</a></li>
                         <li><a href="#volunteers" class="nounderline">Volunteers</a></li>
                         <li><a href="#supporters" class="nounderline">Supporters</a></li>
                       </ul>
                       <ul class="col-lg-4 list-unstyled">
                         <li>
                           <h4 style="color:#225e91;"><strong>Resources</strong></h4>
                         </li>
                         <li><a href="#photos" class="nounderline">Photos</a></li>
                         <li><a href="#videos" class="nounderline">Videos</a></li>
                         <li><a href="#books" class="nounderline">Book</a></li>
                         <li><a href="#reports" class="nounderline">Annual Reports</a></li>
                         <li><a href="#newsletter" class="nounderline">News Letters</a></li>
                         <li><a href="#jobs" class="nounderline">Job Vacancies</a></li>
                         <li><a href="#policies" class="nounderline">Policies</a></li>
                       </ul>
                      </div>
                   </div>
                 </li>
               </ul>
             </li>

          <!-- Programs Menu -->
          <li class="dropdown yamm-fw"><a href="" data-toggle="dropdown" class="dropdown-toggle"><strong>Programs</strong><b class="caret"></b></a>
            <ul class="dropdown-menu" role="menu">
              <li>
                <div class="yamm-content">
                  <div class="row">
                    <ul class="col-lg-6 list-unstyled" style="line-height:1.42857143;">
                      <li>
                        <h4 style="color:#225e91;"><strong>Children & Youth</strong></h4>
                      </li>
                      <li><a href="#mothers" class="nounderline">Play Group</a></li>
                      <li><a data-placement="right" data-toggle="tooltip" href="#holiday" class="nounderline" title="School Holiday Program">School Holiday Program</a></li>
                      <li><a href="#boys" class="nounderline">Boys 2 Men</a></li>
                      <li><a href="#girls" class="nounderline">Fun 4 Girls</a></li>
                      <li><a href="#teens" class="nounderline">Drop In Cafe</a></li>
                      <li><a data-placement="right" data-toggle="tooltip" href="#youth" class="nounderline" title="Youth Workshop Mentoring Program">Youth Workshop Mentoring Program</a></li>
                      <li><a href="#backyard" class="nounderline">Backyard Sports</a></li>
                      <li><a href="#bike" class="nounderline">Bike Hut</a></li>
                    </ul>
                    <ul class="col-lg-6 list-unstyled" style="line-height:1.42857143;">
                      <li>
                        <h4 style="color:#225e91;"><strong>Adults</strong></h4>
                      </li>
                      <li><a href="#bibleFellow" class="nounderline">Bible Fellowship</a></li>
                      <li><a href="#clubwork" class="nounderline">Clubwork</a></li>
                      <li><a href="#arts" class="nounderline">Arts and Crafts</a></li>
                      <li><a href="#meal" class="nounderline">Community Meal</a></li>
                      <li><a href="#individual" class="nounderline">Individual Support</a></li>
                      <li><a href="#mens" class="nounderline">Mens Support Group</a></li>
                      <li><a href="#adult" class="nounderline">Adult Workshops</a></li>
                    </ul>
                  </div>
                </div>
              </li>
            </ul>
          </li>

           <!-- Testimonials Menu -->
          <li class="dropdown">
            <a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><b>Testimonials </b><span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#participants">Participants</a></li>
              <li><a href="#caregive">Care Givers</a></li>
              <!--<li><a href="#sponsors">Our Sponsors</a></li>-->
            </ul>
          </li>

          <li><a href="#links"><b>Useful links </b></a></li>
          <li><a href="#contact"><b>Contact Us </b></a></li>
          <li><a href="#donations" id="donationBtn" class="btn btn-primary btn-md" role="button" style="margin-top:2px; margin-bottom:-25px; !important; color: #ffffff;"><b> Donations </b><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- ============ END NAVBAR =========== -->

<!--<script>
//$('a').tooltip();
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
});
</script>-->

<!-- ==== Navbar Scroll Change ==== -->
<div id="startchange"></div>


<div data-ng-view></div>

<!-- ========= START FOOTER ========== -->
<!--<footer id="footer">
                        <ul class="icons">
                            <li><a href="https://www.facebook.com/WiznuForHair/" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
                            <li><a href="https://www.instagram.com/wiznuforhair/" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
                            <li><a href="#" class="icon fa-envelope-o"><span class="label">Email</span></a></li>
                        </ul>
                        <ul class="copyright">
                            <li>&copy; 2017, Open House CIC </li><li>Design: <a href="http://www.bliss.net.au">Bliss</a></li>
                        </ul>
                    </footer>-->

<footer class="footer" style="padding: 6em 0 4em 0; background-color: #1d242a;">
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-4 col-sm-4 col-lg-4">
        <a href="http://www.acnc.gov.au/" target="_blank">
          <img class="img-responsive center-block" src="images/ACNC-Charity-Logo.png" alt="ACNC Charity" width="100" height="100"></a>
      </div>

      <div class="col-xs-4 col-sm-4 col-lg-4">
        <div class="blank-gap-20"></div>
        <a href="http://www.qip.com.au/" target="_blank">
          <img class="img-responsive center-block" src="images/QIP-logo.png" alt="QIP logo" width="125"></a>
      </div>

      <!--<div class="visible-sm visible-xs clearfix"></div>-->
      <!--<div class="col-xs-6 col-sm-6 col-lg-2 text-center">
        <h4><strong>Join Us</strong></h4>
        <ul class='list-unstyled'>
          <li style="float: left; padding-left:50px; padding-right:5px;"><a data-placement="bottom" data-toggle="tooltip" href="https://www.youtube.com/channel/UClFV3cZ3_e4u3O0zEmYun3w" title="YouTube" target="_blank">
            <img class="center-block centered" src="images/icons/youtube.png" width="30"><a></li>
          <li style="float: left; padding-right:5px;"><a data-placement="bottom" data-toggle="tooltip" href="https://www.facebook.com/openhousecic/" title="facebook" target="_blank">
            <img class="center-block centered" src="images/icons/facebook.png" width="30"></a></li>
          <li style="float: left; padding-right:5px;"><a data-placement="bottom" data-toggle="tooltip" href="https://www.linkedin.com/company/open-house-cic" title="LinkedIn" target="_blank">
            <img class="center-block centered" src="images/icons/linkedin.jpg" width="30"></a></li>
          <li style="float: left; padding-right:5px;"><a data-placement="bottom" data-toggle="tooltip" href="https://www.flickr.com/photos/146218711@N02" title="flickr" target="_blank">
            <img class="center-block centered" src="images/icons/Flickr.png" width="30"></a></li>
        </ul>
      </div>-->

      <div class="col-xs-4 col-sm-4 col-lg-4">
        <a href="https://www.ndis.gov.au/" target="_blank">
          <img class="img-responsive center-block" src="images/NDIS-logo.png" width="100" height="100"></a>
      </div>

      <!--<div class="col-lg-1"></div>-->
    </div>

    <div class="row" style="padding-top:10px;">
      <div class="col-sm-12 col-md-12 text-center copyright">
        <div class="copyright-icons">
          <span><i><a href="https://www.facebook.com/openhousecic/" class="icon fa fa-facebook"><!--<span class="label">Facebook</span>--></a></i>
          <i><a href="https://www.instagram.com/wiznuforhair/" class="icon fa fa-flickr"><!--<span class="label">Instagram</span>--></a></i>
          <i><a href="https://www.linkedin.com/company/open-house-cic" class="icon fa fa-linkedin"></a></i>
          <i><a href="#" class="icon fa fa-envelope-o"><!--<span class="label">Email</span>--></a></i></span>
          </div>
        <span>&copy; 2017, Open House Christian Involvement Centres : Website by <a href="http://www.bliss.net.au" target="_blank">Bliss</a></span>
        <div class="blank-gap-10"></div>
        <p><i>We acknowledge and pay respect to the Traditional Owners of the lands upon which Open House Christian Involvement Centres are situated.</i><p>
      </div>
    </div>
  </div>
</footer>-->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src='js/moment.min.js'></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>-->
    <script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-sanitize.min.js"></script>
    <script src="js/ng-csv.min.js"></script>
    <script src="js/app.js"></script>
    <script src="js/navbar-scroll.js"></script>
    <script src="js/email-spam.js"></script>
    <script src="js/wow.min.js"></script>
    <script>wow = new WOW({}).init();</script>

    <!-- NANOGallery Javascript -->
    <script type="text/javascript" src="js/jquery.nanogallery.js"></script>
    <script type="text/javascript" src="js/jquery.nanogallery.min.js"></script>
    <!-- Lightbox Gallery Javascript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.1.1/ekko-lightbox.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.1.1/ekko-lightbox.min.js"></script>

    <script src="js/jquery.bxslider.min.js"></script>
    <!--<script scr="js/jquery.bbAccordion.js"></script>-->

    <script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip();
    });
    </script>

  <script>
     $(function() {
       window.prettyPrint && prettyPrint()
       $(document).on('click', '.yamm .dropdown-menu', function(e) {
         e.stopPropagation()
       })
     })
   </script>

  </body>
</html>

最佳答案

您的 Logo 太大。

或者你的导航栏太小了。

差不多就这些了。在您的实际站点上，您正在加载一个比导航栏高的 Logo ，因此当您将鼠标悬停在导航栏元素上时，菜单将加载到导航栏下方，但是当您向下移动鼠标时，您的鼠标会退出导航栏元素，因此它认为您刚搬走。

我已经 fork 了你的 Bootply - https://www.bootply.com/Pk3KFvr0RL - 但实际上包含了您的 Logo ，因此您可以看到问题。

您可以做几件事。您可以缩小 Logo ，或者增大导航项的大小，使其填满整个区域。一种简单的方法是更改​​ .navbar-nav>li>a 规则中的 padding-top 和 padding-bottom到 20px。可能有更好的方法使其响应更快(如果您更改 Logo 的高度等)，但这只是一个快速修复，请随时找到更好的方法。

关于html - Bootstrap Yamm Navbar 悬停时出现故障，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45072347/

26 4 0
文章推荐： jquery - 使用 css 让背景颜色始终环绕文本
文章推荐： javascript - 如何针对多个数字范围测试一个变量
文章推荐： ios - 'state changing' APNS 失败时的应用架构
文章推荐： javascript - 如何包装所有下一个元素直到？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com