title: Fade ul menu element in and out on mouse hover
body: <p>I'm trying to create a slick fade in/fade out effect when users hover over an unordered list menu by using jQuery.Thus far I can fade in the sub menu when users hover over a menu item containing sub items but I'm struggling to hide it.</p>
  
  <p>The requirement is as follows - If the mouse is not over the sub menu items or it's parent - fade out the sub menu list.</p>
  
  <p>I'm including a screen shot of my menu and the HTML markup, please suggest how can i hide the menu as per the requirement listed above:</p>
  
  <p><img src="https://i.stack.imgur.com/5xqjx.jpg" alt="menu"></p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;Home&lt;/title&gt;
      &lt;link href="Styles/Style.css" rel="stylesheet" type="text/css" /&gt;
      &lt;script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          jQuery(document).ready(function () {
  
              $('#subList').css("display", "none");
  
              $('#item3').mouseover(function () {
                  $('#subList').fadeIn('slow');
                  $('#subList').css("display", "block");
              });
  
              $('#subItem1').mouseover(function () {
                  $('#subList').css("display", "block");
              });
  
              $('#subItem2').mouseover(function () {
                  $('#subList').css("display", "block");
              });
  
              $("#subItem1").mouseleave(function () {
                  $("#subList").fadeOut("slow");
              });
  
              $('#subItem2').mouseleave(function () {
                  $('#subList').fadeOut("slow");
              });
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="menu"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="item4.htm"&gt;Menu Item 4&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" id="item3"&gt;Menu Item3&lt;/a&gt;
                  &lt;ul id="subList"&gt;
                      &lt;li id="subItem1"&gt;&lt;a href="subItem1.htm"&gt;Sub Item 1&lt;/a&gt;&lt;/li&gt;
                      &lt;li id="subItem2"&gt;&lt;a href="subItem2.htm"&gt;Sub Item 2&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="item2.htm"&gt;Menu Item 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="item1.htm"&gt;Menu Item 1&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>