jQuery show an element on hover only if it's already hidden

I am pretty new to jQuery and I am trying, but failing, so far to make a form element with a class of .topbardropdownmenu to be displayed when the user hovers over a button with a class of .menuitemtools. Once the user hovers over the button the .menuitemtools I don't want the form to be rehovered if it is already displaying hence the if statment to check it's display property is none. At the moment this script works but everytime you hover over the button .menuitemtools the form is rehovered which creates an annoying flashing. Once the form is displayed I don't want .menuitemtools to d开发者_如何学运维o anything and I want the form to dissappear when the mouseleaves the form.

Hopefully all that's clear and I'm not far off? Thanks very much for looking at this.

$(document).ready(function () {
    $('.topbardropdownmenu').hide();
    if ($('.topbardropdownmenu').css('display') == 'none') {
        $('.menuitemtools').hover(function () {
            $('.topbardropdownmenu').fadeIn('slow');
        });
    }
    $('.topbardropdownmenu').mouseleave(function () {
        $('.topbardropdownmenu').fadeOut('slow');
    });

});

  $(document).ready(function () {
      $('.topbardropdownmenu').hide(); 
      $('.menuitemtools').mouseover(function() { 
        if(!$('.topbardropdownmenu:visible').length)
        {
          $('.topbardropdownmenu').fadeIn('slow'); 
        }
      });

      $('.topbardropdownmenu').mouseleave(function() { 
       $('.topbardropdownmenu').fadeOut('slow') 
      });
  });