title: CSS Animation on Firefox ends if I move my mouse to the submenu too soon
body: <p>I have a css animation that sends a submenu out the side of my menu list.
  I'm using the animate.css library</p>
  
  <p>(EDIT)  This problem appears to be on Firefox only.</p>
  
  <p>If you try to move your mouse over to the submenu too soon (ie before the animation is fully complete), then the submenu closes.  My <code>.submenu</code> class is within the parent class that determines this (<code>.person-menu</code>), but it appears that the .submenu class isn't fully there until this animation is complete.</p>
  
  <p>How can I make it so that if the user moves the mouse over to the submenu before the animation is complete, they won't lose it?</p>
  
  <p>Here's the relevant code:
  html:</p>
  
  <pre><code>&lt;nav class="interview-menu"&gt;
      &lt;div class="person-menu"&gt; 
          &lt;div class="person" id="Person One"&gt;&lt;a href="#"&gt;Person One&lt;/a&gt;&lt;/div&gt;
          &lt;div class="submenu"&gt;
              &lt;div class='once'&gt;&lt;a&gt;Once&lt;/a&gt;&lt;/div&gt;
              &lt;div class="info"&gt;&lt;a href="#"&gt;Info&lt;/a&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>javascript/jquery:</p>
  
  <pre><code>var submenuInAnimation = "animated fadeInLeft";
  var submenuOutAnimation = "animated fadeOutLeft";
  var animationEnd = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";
  
  $(".person-menu").hover(
  function () {
      $(this).children(".submenu").removeClass(submenuOutAnimation);
      $(this).children(".submenu").css("display", "inline-block");
      $(this).children(".submenu").addClass(submenuInAnimation).one(animationEnd, 
          function () {
              $(this).removeClass(submenuInAnimation);
              $(this).css("display", "inline-block");
          });
  },
  function () {
      $(this).children(".submenu").removeClass(submenuInAnimation); 
      $(this).children(".submenu").addClass(submenuOutAnimation).one(animationEnd,
          function () {
              $(this).removeClass(submenuOutAnimation);
              $(this).css("display", "none");
          });
  });
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.person-menu {
      //width:150px;
      width: 420px;    // This is the change I made to fix this
      padding:0;
      position:static;
  }
  .person {
      display:inline-block;
  }
  .person a {
      display: block;
      width:150px;
  }
  .submenu {
      display:none;
      width:150px;
      position:static;
      z-index:-1;
  }
  .submenu a {
      display: block;
      padding: .4em 1.2em;
  }
  .info {
      display: inline-block;
      position:relative;
      width:30px;
      right:5px;
  }
  .info a {
      display:block;
      width:30px !important;
  }
  .once {
      display: inline-block;
      cursor:pointer;
  }
  .once a {
      display: block;
      width: 80px;
      position: relative;
  }
  .interview-menu {
      width: 180px;
      height: 100%;
      margin-left: auto;
      margin-right: auto;
      overflow: visible;
      white-space:nowrap;
  }
  .interview-menu a {
      padding: .4em 1.2em;
      text-align: center;
      border-color:white;
      background:linear-gradient(#FFF, #EFEFEF);
  }
  .interview-menu a:hover, .interview-menu a:focus {
      background:linear-gradient(#FFF, #DDD);
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/ehsckewz/2/" rel="nofollow">http://jsfiddle.net/ehsckewz/2/</a></p>
  
  <p>I have attempted this with both visibility:hidden; and display:none; methods of hiding the .submenu class.  </p>
  
  <p>I have also attempted (but it is not reflected here) a blank  within the .person-menu class to hold the place until .submenu was ready.  But still no luck.</p>
  
  <p>EDIT: Fixed!  It was only a problem on Firefox.  I edited the width of <code>.person-menu</code> to 420px to overlap far over to the right where the submenu would extend to.</p>