$(document).ready(function(){

  $("ul.topnav li a").hover(function() { //When trigger is clicked...
   $(this).addClass("subhover");
         //Following events are applied to the subnav itself (moving subnav up and down)
   var $slider = $(this).parent().find("ul.subnav")
   sliding = setTimeout(function(){
    $slider.stop().slideDown(150).show()
   },250) //Drop down the subnav on hover after 250ms

   $(this).parent().mouseleave(function() {
    clearTimeout(sliding)
    $slider.stop().slideUp(150, function(){
     $slider.attr('style','display:none')
    }); //When the mouse hovers out of the subnav, move it back up
   });   
  }, function(){
   $(this).removeClass("subhover");
  });

});