JQuery SlideDown не работает при переключении вкладки

Question

У меня есть HTML с некоторыми вкладками, когда мы наводим указатель на вкладку, а div соскальзывает с деталями, и когда мы наводим курсор на второй вкладке, первый div открывается, а второй div сдвигается вниз. все работает отлично, но когда я открываю новую вкладку и пересматриваю свою страницу, скользящий не является гладким или не работает.

HTML Page

<div id="navbar"> 
    <table id="navbar_link" class="navbar_link_index"> 
     <tr> 
      <td id="about"><a href="TEMP">TEMP </a></td> 
      <td id="services"><a href="TEMP">TEMP</a></td> 
      <td id="products"><a href="TEMP">TEMP</a></td> 
      <td><a href="TEMP">TEMP</a></td> 
      <td><a href="TEMP">TEMP</a></td> 
      <td><a href="TEMP">TEMP</a></td> 
     </tr> 
    </table> 
</div> 

<div class="nav_details" id="one"><table class="nav_details_table"><tr><td width="50%"><a href="about.html"><h3>TEMP</h3><p>TEMP<br></p></a></td width="50%"><td><h3>TEMP</h3> 
    <p>TEMP</p></td></tr></table></div> 

    <div class="nav_details" id="two"><table class="nav_details_table servicetbl"><tr><td width="50%"><a href="about.html"><h3>TEMP</h3><p>TEMP<br></p></a></td width="50%"><td><h3>TEMP</h3> 
     <p>TEMP</p></td></tr></table></div> 

     <div class="nav_details" id="three"> 
      <table class="nav_details_table servicetbl"><tr><td width="50%"><a href="about.html"><h3>TEMP</h3><p>TEMP<br></p></a></td width="50%"><td><h3>TEMP</h3> 
       <p>TEMP</p></td></tr></table> 
      </div> 

Jquery

$("#one").hover(function()  {$("#one").stop().slideDown().addClass("border_bottom_cls");$("#about").css("background","red");},function(){$("#one").stop().slideUp().removeClass("border_bottom_cls");$("#about").css("background","toggle");}); 
$("#two").hover(function(){$("#two").stop().slideDown().addClass("border_bottom_cls");$("#services").css("background","red");},function(){$("#two").stop().slideUp().removeClass("border_bottom_cls");$("#services").css("background","toggle");}); 
$("#three").hover(function(){$("#three").stop().slideDown().addClass("border_bottom_cls");$("#products").css("background","red");},function(){$("#three").stop().slideUp().removeClass("border_bottom_cls");$("#products").css("background","toggle");}); 

Answer 1

<script> 
    $(document).ready(function(){ 
    var t = null; 
    $('#main-nav-item').hover(function(){ 
     var that = this; 
     t = setTimeout(function(){ 
      $('#sub-nav-item').slideDown(200); 
      t = null; 
     }, 300); 
    }, function(){ 
     if (t){ 
      clearTimeout(t); 
      t = null; 
     } 
     else 
      $('#sub-nav-item').slideUp(200); 
    }); 
    }); 
</script> 

Просто сосредоточиться на # главный-навигационный элемент- и # суб-навигационный элемент-

копировать эти коды и изменять с помощью ваших кодов.