title: Strange mouseover and mouseleave behavior
body: <p>I must be not understanding mouseover/mouseleave, because I can get more than one menu to drop down at a time. I get the exact same behavior if I use <code>.hover(fOver, fLeave)</code>.</p>
  
  <p><a href="http://jsfiddle.net/abalter/zhbjsvm4/" rel="nofollow">http://jsfiddle.net/abalter/zhbjsvm4/</a></p>
  
  <p><a href="http://plnkr.co/edit/kFjomgrNDmlqP6MckOkW?p=preview" rel="nofollow">http://plnkr.co/edit/kFjomgrNDmlqP6MckOkW?p=preview</a></p>
  
  <p>(take your pick)</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;p&gt;viewport width: &lt;span id="viewport-width"&gt;&lt;/span&gt; &lt;/p&gt;
  &lt;div class="container-fluid" id="top-menu-container"&gt;
      &lt;ul id="top-menu"&gt;
          &lt;li class="top-menu-item" id="item-top-1" data-drop-down-for="sub-menu-1"&gt;
              &lt;p class="drop-down-toggle"&gt;top 1&lt;/p&gt;
              &lt;ul class="sub-menu" id="sub-menu-1"&gt;
                  &lt;li class="sub-menu-item"&gt;&lt;a&gt;item 1&lt;/a&gt;
  
                      &lt;ul class="sub-sub-menu" id="side-menu-list-1-1"&gt;
                          &lt;li class="sub-sub-menu-item"&gt;item 1&lt;/li&gt;
                          &lt;li class="sub-sub-menu-item"&gt;item 2&lt;/li&gt;
                          &lt;li class="sub-sub-menu-item"&gt;item 3&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li class="sub-menu-item"&gt;&lt;a&gt;item 2&lt;/a&gt;
  
                  &lt;/li&gt;
                  &lt;li class="sub-menu-item"&gt;&lt;a&gt;item 3&lt;/a&gt;
  
                      &lt;ul class="sub-sub-menu" id="side-menu-list-1-3"&gt;
                          &lt;li class="sub-sub-menu-item"&gt;item 1&lt;/li&gt;
                          &lt;li class="sub-sub-menu-item"&gt;item 2&lt;/li&gt;
                          &lt;li class="sub-sub-menu-item"&gt;item 3&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="top-menu-item" id="item-top-2" data-drop-down-for="sub-menu-2"&gt;
              &lt;p class="drop-down-toggle"&gt;top 2&lt;/p&gt;
              &lt;ul class="sub-menu" id="sub-menu-2"&gt;
                  &lt;li class="sub-menu-item"&gt;&lt;a&gt;item 1&lt;/a&gt;
  
                      &lt;ul class="sub-sub-menu" id="sub-menu-2-1"&gt;
                          &lt;li class="sub-sub-menu-item"&gt;item 1&lt;/li&gt;
                          &lt;li class="sub-sub-menu-item"&gt;item 2&lt;/li&gt;
                          &lt;li class="sub-sub-menu-item"&gt;item 3&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li class="sub-menu-item"&gt;&lt;a&gt;item 2&lt;/a&gt;
  
                      &lt;ul class="sub-sub-menu" id="sub-menu-2-2"&gt;
                          &lt;li class="sub-sub-menu-item"&gt;item 1&lt;/li&gt;
                          &lt;li class="sub-sub-menu-item"&gt;item 2&lt;/li&gt;
                          &lt;li class="sub-sub-menu-item"&gt;item 3&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li class="sub-menu-item"&gt;&lt;a&gt;item 3&lt;/a&gt;
  
              &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li class="top-menu-item" id="item-top-3" data-drop-down-for="sub-menu-3"&gt;
                  &lt;p class="drop-down-toggle"&gt;top 3&lt;/p&gt;
                  &lt;ul class="sub-menu" id="sub-menu-3"&gt;
                      &lt;li class="sub-menu-item"&gt;&lt;a&gt;item 1&lt;/a&gt;
  
                          &lt;ul class="sub-sub-menu" id="sub-menu-3-1"&gt;
                              &lt;li class="sub-sub-menu-item"&gt;item 1&lt;/li&gt;
                              &lt;li class="sub-sub-menu-item"&gt;item 2&lt;/li&gt;
                              &lt;li class="sub-sub-menu-item"&gt;item 3&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li class="sub-menu-item"&gt;&lt;a&gt;item 2&lt;/a&gt;
  
                          &lt;ul class="sub-sub-menu" id="sub-menu-3-2"&gt;
                              &lt;li class="sub-sub-menu-item"&gt;item 1&lt;/li&gt;
                              &lt;li class="sub-sub-menu-item"&gt;item 2&lt;/li&gt;
                              &lt;li class="sub-sub-menu-item"&gt;item 3&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li class="sub-menu-item"&gt;&lt;a&gt;item 3&lt;/a&gt;
  
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>var viewStyle = "desktop";
  
  $('#viewport-width').text($(window).width());
  if ($(window).width() &lt;= 768) {
      viewStyle = "mobile";
  } else {
      viewStyle = "desktop";
  }
  
  $(window).trigger('resize');
  
  $('#viewport-width').text($(window).width() + "  " + viewStyle + "  " + ($(window).width() &lt;= 768));
  
  $(window).resize(function () {
  
      $('#viewport-width').text($(window).width() + "  " + viewStyle + "  " + ($(window).width() &lt;= 768));
  
      if ($(window).width() &lt;= 768) {
          viewStyle = "mobile";
      } else {
          viewStyle = "desktop";
      }
  
  });
  
  
  var activeSubMenuID = '';
  
  $('.top-menu-item')
      .mouseover(function (e) {
      if (viewStyle == "desktop") {
          console.log("mouseover");
          console.log("mouse over " + e.target.id);
          //console.log(e.target);
          var target = $(e.target);
          //console.log(target[0]);
          var targetSubMenu = target.next('.sub-menu');
          //console.log(targetSubMenu[0]);
          var targetSubMenuID = targetSubMenu.prop('id');
          targetSubMenu.slideDown("fast");
      }
  })
      .mouseleave(function (e) {
      if (viewStyle == "desktop") {
          console.log("mouse leave");
          console.log("mouse leaving " + e.target.id);
          //console.log(e.target);
          var target = $(e.target);
          //console.log(target[0]);
          var targetSubMenu = target.next('.sub-menu');
          //console.log(targetSubMenu[0]);
          var targetSubMenuID = targetSubMenu.prop('id');
          targetSubMenu.slideUp("fast");
      }
  });
  
  
  $(".drop-down-toggle").on('click', function (e) {
      console.log(e.target);
      var target = $(e.target);
      console.log(target[0]);
      var targetSubMenu = target.next('.sub-menu');
      console.log(targetSubMenu[0]);
      var targetSubMenuID = targetSubMenu.prop('id');
      //alert("active submenu " + activeSubMenuID + " target sub menu " + targetSubMenuID);
      if (viewStyle == "mobile") {
          if (activeSubMenuID == targetSubMenuID) {
              //alert("closing " + targetSubMenuID);
              $('#' + activeSubMenuID).slideUp("slow");
              activeSubMenuID = '';
          } else if (activeSubMenuID === '') {
              //alert("opening " + targetSubMenuID);
              $('#' + targetSubMenuID).slideDown("slow");
              activeSubMenuID = targetSubMenuID;
          } else {
              //alert("closing " + activeSubMenuID);
              $('#' + activeSubMenuID).slideUp("slow", function () {
                  //alert("opening " + targetSubMenuID);
                  $('#' + targetSubMenuID).slideDown("slow");
                  activeSubMenuID = targetSubMenuID;
              });
  
              // other method tried
              // just consecutively after
              //alert("opening " + targetSubMenuID);
              //$('#' + targetSubMenuID).slideToggle("slow");
              //activeSubMenuID = targetSubMenuID;
          }
      }
  
  });
  </code></pre>