鼠标悬停在第二个菜单选项上时，下拉菜单消失

Question

我正在为网站编写一个适合移动设备的菜单，出于某种原因，当您转到任何一个下拉选项并将鼠标移到第二个选项时，下拉菜单就会消失。我可以鼠标悬停并单击第一个下拉选项，如果我正在查看菜单的移动版本，我可以单击第二个选项，但由于某些原因，在桌面版本上，下拉菜单会消失。最有趣的部分是，当我运行我附加到这篇文章的代码时，它没有我描述的问题。当鼠标悬停在第二个选项上时，是否有下拉菜单消失的原因？

/*!
 * Start Bootstrap - Full Slider (http://startbootstrap.com/template-overviews/full-slider)
 * Copyright 2013-2017 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-full-slider/blob/master/LICENSE)
 */

#logo{
    margin-left: 3px;
    float: left;
}

body {
    background:url('https://facsen.wsu.edu/WSUPullman080902990.jpg') ;
    background-size: 100% auto;
    background-repeat: no-repeat;
}    

#transparent{
    opacity: 0;
}

html{
    background-repeat: no-repeat; 
}

p { 
    position: relative;
    text-align: justify;
    left: 15%; 
    width: 70%; 
}

p span {  
    display: inline-block;
    margin-top: 5%; 
    color: black; 
    font: bold 100%/45px Helvetica, Sans-Serif;  
}

.container {
    position: relative;
    text-align: center;
    width: 100%;
    left: 0;
    color: white;
}

.bottom-left {
    position: absolute;
    bottom: 8px;
    left: 16px;
    color: white; 
    font: bold 2.5vw/45px Helvetica, Sans-Serif; 
    text-shadow: 2px 2px 2px #36454f;
    left: 40px;
    bottom: 50px;
}

.bottom-left-author {
    position: absolute;
    bottom: 8px;
    left: 16px;
    color: white; 
    font: bold 2vw/45px Helvetica, Sans-Serif; 
    text-shadow: 2px 2px 2px #36454f;
    left: 40px;
}

.bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
    color: white; 
    font: bold 1vw/45px Helvetica, Sans-Serif; 
    text-shadow: 2px 2px 2px #36454f;
    right: 40px;
}



@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  font-family: Montserrat, sans-serif;
  background: #36454f;
  border-radius: 12px;
  width: 99%;
  padding: 12px;
  margin: 0.5%;
  z-index: 10000;
  
  position: fixed;
  
  
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu > ul > li > a {
  padding: 17px;
  font-size: 12px;
  letter-spacing: 1px;
  text-decoration: none;
  color: #dddddd;
  font-weight: 700;
  text-transform: uppercase;
}
#cssmenu > ul > li:hover > a {
  color: #ffffff;
}
#cssmenu > ul > li.has-sub > a {
  padding-right: 30px;
}
#cssmenu > ul > li.has-sub > a:after {
  position: absolute;
  top: 22px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background: #dddddd;
  content: '';
}
#cssmenu > ul > li.has-sub > a:before {
  position: absolute;
  top: 19px;
  right: 14px;
  display: block;
  width: 2px;
  height: 8px;
  background: #dddddd;
  content: '';
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#cssmenu > ul > li.has-sub:hover > a:before {
  top: 23px;
  height: 0;
}
#cssmenu ul ul {
  position: absolute;
  left: -9999px;
}
#cssmenu.align-right ul ul {
  text-align: right;
}
#cssmenu ul ul li {
  height: 0;
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#cssmenu li:hover > ul {
  left: auto;
}
#cssmenu.align-right li:hover > ul {
  left: auto;
  right: 0;
}
#cssmenu li:hover > ul > li {
  height: 35px;
}
#cssmenu ul ul ul {
  margin-left: 100%;
  top: 0h
}
#cssmenu.align-right ul ul ul {
  margin-left: 0;
  margin-right: 100%;
}
#cssmenu ul ul li a {
  border-bottom: 1px solid rgba(150, 150, 150, 0.15);
  padding: 11px 15px;
  width: 170px;
  font-size: 12px;
  text-decoration: none;
  color: #dddddd;
  font-weight: 400;
  background: #333333;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
  border-bottom: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
  color: #ffffff;
}
#cssmenu ul ul li.has-sub > a:after {
  position: absolute;
  top: 16px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background: #dddddd;
  content: '';
}
#cssmenu.align-right ul ul li.has-sub > a:after {
  right: auto;
  left: 11px;
}
#cssmenu ul ul li.has-sub > a:before {
  position: absolute;
  top: 13px;
  right: 14px;
  display: block;
  width: 2px;
  height: 8px;
  background: #dddddd;
  content: '';
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#cssmenu.align-right ul ul li.has-sub > a:before {
  right: auto;
  left: 14px;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
  top: 17px;
  height: 0;
}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  #cssmenu {
    width: 100%;
  }
  #cssmenu ul {
    width: 100%;
    display: none;
  }
  #cssmenu.align-center > ul {
    text-align: left;
  }
  #cssmenu ul li {
    width: 100%;
    border-top: 1px solid rgba(120, 120, 120, 0.2);
  }
  #cssmenu ul ul li,
  #cssmenu li:hover > ul > li {
    height: auto;
  }
  #cssmenu ul li a,
  #cssmenu ul ul li a {
    width: 100%;
    border-bottom: 0;
  }
  #cssmenu > ul > li {
    float: none;
  }
  #cssmenu ul ul li a {
    padding-left: 25px;
  }
  #cssmenu ul ul ul li a {
    padding-left: 35px;
  }
  #cssmenu ul ul li a {
    color: #dddddd;
    background: none;
  }
  #cssmenu ul ul li:hover > a,
  #cssmenu ul ul li.active > a {
    color: #ffffff;
  }
  #cssmenu ul ul,
  #cssmenu ul ul ul,
  #cssmenu.align-right ul ul {
    position: relative;
    left: 0;
    width: 100%;
    margin: 0;
    text-align: left;
  }
  #cssmenu > ul > li.has-sub > a:after,
  #cssmenu > ul > li.has-sub > a:before,
  #cssmenu ul ul > li.has-sub > a:after,
  #cssmenu ul ul > li.has-sub > a:before {
    display: none;
  }
  #cssmenu #menu-button {
    display: block;
    padding: 17px;
    color: #dddddd;
    cursor: pointer;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
  }
  #cssmenu #menu-button:after {
    position: absolute;
    top: 22px;
    right: 17px;
    display: block;
    height: 4px;
    width: 20px;
    border-top: 2px solid #dddddd;
    border-bottom: 2px solid #dddddd;
    content: '';
  }
  #cssmenu #menu-button:before {
    position: absolute;
    top: 16px;
    right: 17px;
    display: block;
    height: 2px;
    width: 20px;
    background: #dddddd;
    content: '';
  }
  #cssmenu #menu-button.menu-opened:after {
    top: 23px;
    border: 0;
    height: 2px;
    width: 15px;
    background: #ffffff;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  #cssmenu #menu-button.menu-opened:before {
    top: 23px;
    background: #ffffff;
    width: 15px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  #cssmenu .submenu-button {
    position: absolute;
    z-index: 99;
    right: 0;
    top: 0;
    display: block;
    border-left: 1px solid rgba(120, 120, 120, 0.2);
    height: 46px;
    width: 46px;
    cursor: pointer;
  }
  #cssmenu .submenu-button.submenu-opened {
    background: #262626;
  }
  #cssmenu ul ul .submenu-button {
    height: 34px;
    width: 34px;
  }
  #cssmenu .submenu-button:after {
    position: absolute;
    top: 22px;
    right: 19px;
    width: 8px;
    height: 2px;
    display: block;
    background: #dddddd;
    content: '';
  }
  #cssmenu ul ul .submenu-button:after {
    top: 15px;
    right: 13px;
  }
  #cssmenu .submenu-button.submenu-opened:after {
    background: #ffffff;
  }
  #cssmenu .submenu-button:before {
    position: absolute;
    top: 19px;
    right: 22px;
    display: block;
    width: 2px;
    height: 8px;
    background: #dddddd;
    content: '';
  }
  #cssmenu ul ul .submenu-button:before {
    top: 12px;
    right: 16px;
  }
  #cssmenu .submenu-button.submenu-opened:before {
    display: none;
  }
}

<!DOCTYPE html>
<html lang="en">

  <head>
      
    <!-- jQuery -->
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <!-- MenuMaker Plugin -->
    <script src="https://s3.amazonaws.com/menumaker/menumaker.min.js"></script>
    <!-- Icon Library -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>WSU Visitor's Magazine</title>
    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="css/full-slider.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   
  </head>

  <body>
      <div id='cssmenu'>
          <ul>
              <img  class="img-circle" id="logo" src="images/logo.png" width="55" height="55">
              <li class='active'><a>Features</a>
          <ul>
              <li><a href='#article1'>Article 1</a></li>
              <li><a href='#article2'>Article 2</a></li>
          </ul>
              </li>
              <li class='active'><a href='#'>Spring</a>
                  <ul>
                      <li><a href='#article3'>Article 1</a></li>
                      <li><a href='#article4'>Article 2</a></li>
                  </ul>
              </li>
              <li class='active'><a href='#'>Summer</a>
                  <ul>
                      <li><a href='#'>Article 1</a></li>
                      <li><a href='#'>Article 2</a></li>
                  </ul>
              </li>
              <li class='active'><a href='#'>Fall</a>
                  <ul>
                      <li><a href='#'>Article 1</a></li>
                      <li><a href='#'>Article 2</a></li>
                  </ul>
              </li>
              <li class='active'><a href='#'>Winter</a>
                  <ul>
                      <li><a href='#'>Article 1</a></li>
                      <li><a href='#'>Article 2</a></li>
                  </ul>
              </li>
          </ul>
      </div>
      
      <script>
          (function($) {

  $.fn.menumaker = function(options) {
      
      var cssmenu = $(this), settings = $.extend({
        title: "WSU Visitor's Magazine",
        format: "dropdown",
        sticky: false
      }, options);

      return this.each(function() {
        cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
        $(this).find("#menu-button").on('click', function(){
          $(this).toggleClass('menu-opened');
          var mainmenu = $(this).next('ul');
          if (mainmenu.hasClass('open')) { 
            mainmenu.hide().removeClass('open');
          }
          else {
            mainmenu.show().addClass('open');
            if (settings.format === "dropdown") {
              mainmenu.find('ul').show();
            }
          }
        });

        cssmenu.find('li ul').parent().addClass('has-sub');

        multiTg = function() {
          cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
          cssmenu.find('.submenu-button').on('click', function() {
            $(this).toggleClass('submenu-opened');
            if ($(this).siblings('ul').hasClass('open')) {
              $(this).siblings('ul').removeClass('open').hide();
            }
            else {
              $(this).siblings('ul').addClass('open').show();
            }
          });
        };

        if (settings.format === 'multitoggle') multiTg();
        else cssmenu.addClass('dropdown');

        if (settings.sticky === true) cssmenu.css('position', 'fixed');

        resizeFix = function() {
          if ($( window ).width() > 768) {
            cssmenu.find('ul').show();
          }

          if ($(window).width() <= 768) {
            cssmenu.find('ul').hide().removeClass('open');
          }
        };
        resizeFix();
        return $(window).on('resize', resizeFix);

      });
  };
})(jQuery);

(function($){
$(document).ready(function(){

$("#cssmenu").menumaker({
   title: "WSU Visitor's Magazine",
   format: "multitoggle"
});

});
})(jQuery);
</script>
     
      
      
      
      
      
      
      
      
      
      <section id="features">
          <div>
              <img class="img-responsive" id="transparent" src="images/football.jpg" width= fill>
          </div>
      </section>
      
      <section id="features">
          <div id="article1">
              <div class="container">
                  <img class="img-responsive" id="articlephoto" src="images/football.jpg"  align="right" width= contain alt=""/>
                  <div class="bottom-left">Golden Bears spoil Cougars’ undefeated season</div>
                  <div class="bottom-left-author"><span class="glyphicon glyphicon-user"></span> Jackson Gardner</div>
                  <div class="bottom-right">Photo Credit</div>
              </div>

              <article>
                  <p><span>No. 15 WSU (6-1, 3-1) lost for the first time this year, as the team fell to University of California, Berkeley (4-3, 1-3) by a final score of 37-3 Friday night.<br>
From the opening kickoff, a combination of penalties and a lack of offensive rhythm ailed the Cougars. Despite a reasonable effort from the defense in the first half, seven turnovers proved to be enough to break the Cougars’ will.<br>
Immediately after the game, Head Coach Mike Leach took the podium and voiced his displeasure in his team’s performance.
“We didn’t play good in any aspect of the game. Cal outcoached us, Cal outplayed us in every position that I saw,” he said. “Our guys just sauntered around on the field, like weirdly, like we have accomplished something.”
Redshirt freshman wide receiver Renard Bell returned the opening kickoff 99 yards to the house, only to be called back by a holding penalty. In total, the Cougars missed out on 14 points in the first half from their penalties.
Then, the ensuing drive was cut short when California redshirt freshman cornerback Camryn Bynum jumped an out route, and picked off redshirt senior quarterback Luke Falk’s pass. The freshman finished the first half with two interceptions.
In Falk’s 262 passing attempts leading up to Friday night, he had only thrown two interceptions. But, in his 43 attempts against the Golden Bears, he threw five interceptions.
“When your [quarterback] turns it over six times, you’re not gonna have a real opportunity to win the game,” Falk said. “We didn’t help the defense tonight at all, we had seven turnovers — that’s unacceptable — and it starts with the quarterback.”
The Golden Bears defense feasted on Falk in the pocket, sacking him nine times — the most in a single game this season. Leach did not miss this opportunity to be critical of his offensive line.
“I think they think they’re too good, and they’re not very tough,” he said.
California redshirt sophomore quarterback Ross Bowers started the game only completing one of his first seven passes. From there, he led his offense to make the plays necessary to pull off an upset victory.
While Bowers threw for 258 yards and just one touchdown, he did display a 7-yard touchdown scramble, where he dove into the end zone and partially landed the acrobatic spin.
Surprisingly, this was not the first time Bowers has pulled a stunt like that. In the WIAA State Finals, Bowers dove into the end zone and was flipped around, similar to Friday night’s game.
“You never think you’re gonna do that twice in a lifetime,” Bowers said. “I was just fired up we could end that drive the way we did with a touchdown. All the extra stuff is great, but I’m just happy we executed in crunch time.”
The seven turnovers by the Cougars kept the defense on the field often. California senior running back Vic Enwere took advantage of the physically taxed defense. The 102 rushing yards by Enwere supplemented Bowers’ production, leading to 365 total yards of offense.
Uncharacteristically, the Cougars went home without a touchdown. A 52-yard field goal from senior kicker Erik Powell were the only points for WSU.
“You’re searching for a bright spot, but there was no bright spot. We were pathetic,” Leach said. “We were a bunch of pathetic front-runners.”
The Cougars return home for a 7:45 p.m. kickoff Saturday against University of Colorado, Boulder (4-3, 3-2). ESPN will be broadcasting the Pac-12 matchup.</span></p>
              </article>
          </div>
      </section>
      
      
      <section id="features">
          <div id="article2">
              <div class="container">
                  <img class="img-responsive" id="articlephoto" src="images/football.jpg"  align="right" width= contain alt=""/>
                  <div class="bottom-left">Golden Bears spoil Cougars’ undefeated season</div>
                  <div class="bottom-left-author"><span class="glyphicon glyphicon-user"></span> Jackson Gardner</div>
                  <div class="bottom-right">Photo Credit</div>
              </div>

              <article>
                  <p><span>No. 15 WSU (6-1, 3-1) lost for the first time this year, as the team fell to University of California, Berkeley (4-3, 1-3) by a final score of 37-3 Friday night.<br>
From the opening kickoff, a combination of penalties and a lack of offensive rhythm ailed the Cougars. Despite a reasonable effort from the defense in the first half, seven turnovers proved to be enough to break the Cougars’ will.<br>
Immediately after the game, Head Coach Mike Leach took the podium and voiced his displeasure in his team’s performance.
“We didn’t play good in any aspect of the game. Cal outcoached us, Cal outplayed us in every position that I saw,” he said. “Our guys just sauntered around on the field, like weirdly, like we have accomplished something.”
Redshirt freshman wide receiver Renard Bell returned the opening kickoff 99 yards to the house, only to be called back by a holding penalty. In total, the Cougars missed out on 14 points in the first half from their penalties.
Then, the ensuing drive was cut short when California redshirt freshman cornerback Camryn Bynum jumped an out route, and picked off redshirt senior quarterback Luke Falk’s pass. The freshman finished the first half with two interceptions.
In Falk’s 262 passing attempts leading up to Friday night, he had only thrown two interceptions. But, in his 43 attempts against the Golden Bears, he threw five interceptions.
“When your [quarterback] turns it over six times, you’re not gonna have a real opportunity to win the game,” Falk said. “We didn’t help the defense tonight at all, we had seven turnovers — that’s unacceptable — and it starts with the quarterback.”
The Golden Bears defense feasted on Falk in the pocket, sacking him nine times — the most in a single game this season. Leach did not miss this opportunity to be critical of his offensive line.
“I think they think they’re too good, and they’re not very tough,” he said.
California redshirt sophomore quarterback Ross Bowers started the game only completing one of his first seven passes. From there, he led his offense to make the plays necessary to pull off an upset victory.
While Bowers threw for 258 yards and just one touchdown, he did display a 7-yard touchdown scramble, where he dove into the end zone and partially landed the acrobatic spin.
Surprisingly, this was not the first time Bowers has pulled a stunt like that. In the WIAA State Finals, Bowers dove into the end zone and was flipped around, similar to Friday night’s game.
“You never think you’re gonna do that twice in a lifetime,” Bowers said. “I was just fired up we could end that drive the way we did with a touchdown. All the extra stuff is great, but I’m just happy we executed in crunch time.”
The seven turnovers by the Cougars kept the defense on the field often. California senior running back Vic Enwere took advantage of the physically taxed defense. The 102 rushing yards by Enwere supplemented Bowers’ production, leading to 365 total yards of offense.
Uncharacteristically, the Cougars went home without a touchdown. A 52-yard field goal from senior kicker Erik Powell were the only points for WSU.
“You’re searching for a bright spot, but there was no bright spot. We were pathetic,” Leach said. “We were a bunch of pathetic front-runners.”
The Cougars return home for a 7:45 p.m. kickoff Saturday against University of Colorado, Boulder (4-3, 3-2). ESPN will be broadcasting the Pac-12 matchup.</span></p>
              </article>
          </div>
      </section>
      
      
      <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/popper/popper.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>

  </body>
</html>