title: User menu fade in and out on hover
body: <p>I have user menus that need to fade in and out on the mouse over and mouse out of an icon. My problem is that the user should also be able to hover over the menu (or img in this case) and not have the menu fade out so that they can click on the links or image within. Here is my code and a jsfiddle. <a href="http://jsfiddle.net/anschwem/7mrM2/" rel="nofollow">http://jsfiddle.net/anschwem/7mrM2/</a></p>
  
  <pre><code>&lt;style&gt;
  div.notif
  {
      display:none;
      position:absolute;
      border:solid 1px black;
      padding:8px;
      background-color:white;
  }
  a.notif:hover + div.notif
  {
      display:block;
  
  }
  div.notif:hover
  {
      display:block;
  
  }
  &lt;/style&gt;
  &lt;script type='text/javascript'&gt;//NOT WORKING
  $(window).load(function(){
  $(document).ready(function()
  {    
      $(".notif").hover(
        function () {
          $('.notif').fadeIn('slow');
        }, 
        function () {
          $('.notif').fadeOut('slow');
        }
      );
  });
  });//]]&gt;  
  &lt;/script&gt;//NOT WORKING
  &lt;/head&gt;
  &lt;body&gt;
  &lt;a class="notif" href="notifications.html" style="text-decoration:none;"&gt;&lt;img src="images/bubble.png" style="position:relative; top:20px;"/&gt;&lt;/a&gt;
      &lt;div class="notif" style="z-index:999999; "&gt;
  &lt;a href="notifications.html"&gt;&lt;img src="images/notif.png"/&gt;&lt;/a&gt;
  &lt;/body&gt;
  </code></pre>