Mouseenter only fires on first mouseenter attempt

Question

I'm trying to slide each ul > li down when hovering over it's parent li and then slide it back up on the mouseleave event

The code works great on the first mouseenter and mouseleave. But when I hover my mouse back over a panel that has already fired once, the mouseenter function doesn't fire a second time I'm know I'm close but not sure where I went wrong

Fiddle away here: http://jsfiddle.net/k2b5a62j/1/

I've tried the fiddle with hover as well with no luck

**I've updated the fiddle a bit for simplicity

Answer 1

I am pretty sure what you mean is, you want, on hover, to be able to view all the items rather than them immediately disappearing. I slightly changed your DOM and jQuery selectors to achieve this:

//Per comment of the original poster:
$('ul li div').on("mouseenter", function(event){
    $(this).find('ul').slideDown('fast', function(){
        // Done.
    });
    event.preventDefault();
}).on("mouseleave",function (event) {
    $(this).find('ul').slideUp('fast', function(){
        // Done.
    });
    event.preventDefault();
});

ul li ul {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <ul>
        <li><div>
        <a href="#">Product1</a>
            <ul id="test">
                <li>Item1</li>
                <li>Item2</li>
                <li>Item3</li>
                <li>Item4</li>
            </ul>
        </div></li>
        <li><div><a href="#">Product2</a>
            <ul>
                <li>Item product 2</li>
                <li>Item product 2</li>
                <li>Item product 2</li>
            </ul>
        </div></li>
        <li><div><a href="#">Product3</a>
            <ul>
                <li>Item product 2</li>
                <li>Item product 2</li>
            </ul>
        </div></li>
    </ul>
</div>

Reply to the asker's comment as to have each li display one at a time:

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

  $('.inner-link').hide();


  $('.link').mouseenter(function() {
    $(this)
    	.find('ul')
      .find('li')
      .stop(true,true)
      .each(function(index) {
      	$(this)
        	.delay(500 * index)
          .slideDown(500);
    	});
  });

  $('.link').mouseleave(function() {
    $(this)
    	.find('ul')
      .find('li')
      .stop(true,true)
      .each(function(index) {
      	$(this)
        	.delay(500 * index)
          .slideUp(500);
    	});
  });

});

.link {
  position: relative;
  right: 0%;
  width: 8%;
  list-style-type: none;
  vertical-align: middle;
  display: table-cell;
  outline: none;
  height: 100%;
  text-align: center;
  margin: 0px 11px;
}

.inner-list {
  position: absolute;
  width: 100%;
  margin: 0px auto;
  left: 0px;
}

.inner-link {
  list-style-type: none;
  width: 100%;
  margin: 0px 0px 0px -40px;
  border-bottom: 1px black solid;
}

.inner-link:first-child {
  padding-top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-container">
  <li class="link"><a href="">Panel 1</a>
    <ul class="inner-list">
      <li class="inner-link">Link #1</li>
      <li class="inner-link">Link #2</li>
      <li class="inner-link">Link #3</li>
      <li class="inner-link">Link #4</li>
      <li class="inner-link">Link #5</li>
    </ul>
  </li>
  <li class="link"><a href="">Panel 2</a>
    <ul class="inner-list">
      <li class="inner-link">Link #1</li>
      <li class="inner-link">Link #2</li>
      <li class="inner-link">Link #3</li>
      <li class="inner-link">Link #4</li>
      <li class="inner-link">Link #5</li>
    </ul>
  </li>
  <li class="link"><a href="">Panel 3</a>
    <ul class="inner-list">
      <li class="inner-link">Link #1</li>
      <li class="inner-link">Link #2</li>
      <li class="inner-link">Linnk #3</li>
      <li class="inner-link">Link #4</li>
      <li class="inner-link">Link #5</li>
    </ul>
  </li>
  <li class="link"><a href="">Panel 4</a>
    <ul class="inner-list">
      <li class="inner-link">Link #1</li>
      <li class="inner-link">Link #2</li>
      <li class="inner-link">Linnk #3</li>
      <li class="inner-link">Link #4</li>
      <li class="inner-link">Link #5</li>
    </ul>
  </li>

</ul>