onmouse hover dropdown

Question

I am trying to get on mouse hover animated drop-down, which I am unable to get it, if I move the mouse from tab, drop-down should not be visible. I have link in drop-down when clicked should go the specified link. Below is my code:

$("#newOne").mouseover(function() {
  $("#newOneMenu").slideDown("slow")

});

$(".tab-body").click(function() {
  $("#newOneMenu").slideUp("slow")

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-body">
  <ul class="tabs">
    <li class="newOne" style=" width:10%">
      <input type="radio" checked name="tabs" id="tab1">
      <label id="newOne" for="tab1">January <span> <img   src="img/nav_arrow.png"   border="0" style="vertical-align:middle;"/></span> 
      </label>
      <div id="newOneMenu" style="width: 133px; height: 100px; display:none;background-color: #f5fbfe;position: absolute; z-index: 9999;left: 3px;">
        <table width="100%" style="margin-top:2px;" cellpadding="3">
          <tr>
            <td style="height:25px;">
              <div class="moreactions-16">New</div>
            </td>
          </tr>
          <tr>
            <td style="height:25px;">
              <div class="moreactions-16">Listing</div>
            </td>
          </tr>
        </table>
      </div>
      <div id="tab-content1" class="tab-content animated fadeIn" style=" height:400px;">
        <div style="width:95%; height:200px; float:left;">
          <ul class="tabsSub">
            <li id="products_details_tab">
              <input type="radio" name="tabsSub" checked id="tabsSub2">
              <div style="color:#0088cc; font-size:14px; font-weight:bold; padding:0 0 5px 0;">January</div>
              <div id="tabsSub-content2" style="display:block; ">
                <h4>Januaray 1st week</h4>
                <div class="frm">
                  <div>
                    <div class="firstDiv">
                      <label>Winter</label>
                      <div>
                        <input type="text" style="width:95%;" />
                      </div>
                    </div>
                    <div class="firstDiv">
                      <label>Monsoon</label>
                      <div>
                        <input type="text" style="width:95%;" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </li>
    <li>
      <input type="radio" name="tabs" id="tab2">
      <label for="tab2">Feburary</label>
      <div id="tab-content3" class="tab-content animated fadeIn" style="height:400px;">
        <div style="width:95%; height:200px; float:left;">
          <ul class="tabsSub">
            <li>
              <input type="radio" name="tabsSub3" checked id="tabsSub3">
              <div id="tabsSub-content3" style="display:block; ">
                <h4></i>Seasons </h4>
                <div class="frm">
                  <div>
                    <div class="firstDiv">
                      <label>Winter</label>
                      <div>
                        <input type="text" style="width:95%;" />
                      </div>
                    </div>
                    <div class="firstDiv">
                      <label>Monsoon</label>
                      <div>
                        <input type="text" style="width:95%;" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
</div>

Answer 1

$("#newOne").mouseover(function() {
  $("#newOneMenu").stop().slideDown("slow")

});

$("#newOne").mouseout(function() {
  $("#newOneMenu").stop().slideUp("slow")

});

Answer 2

The following handler will slide up the menu when the mouse leaves the tab with jQuery 2.1.3. It appears that some of the older versions of jQuery do not stop the animation correctly when stop() is called, so if there is a dependency on an older version of jQuery then this won't work.

$("#newOne").mouseout(function () {
    $("#newOneMenu").stop().slideUp("slow")
});

Then you can add two more handlers so that when the mouse is over the menu it doesn't slide up, and will slide up on mouseout.

$("#newOneMenu").mouseover(function () {
    $("#newOneMenu").stop().slideDown("slow")
});

$("#newOneMenu").mouseout(function () {
    $("#newOneMenu").stop().slideUp("slow")
});

Note the use of the stop() function--you'll need to add that to the other functions as well, otherwise you can end up with the menu going up and down in a delayed fashion if the user moves the mouse over/out/over/out.