title: how to hide child ul on parent ul mouseout
body: <p>i am creating a menu using UN order list tag and jquery</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      ul
      {
          font-family: Arial, Verdana;
          font-size: 10px;
          margin: 0;
          padding: 0;
          list-style-type: none;
      }
      ul#menu &gt; li
      {
          display: block;
          position: relative;
          float: left;
          display: inline;
          list-style-type: none;
      }
      ul#menu li ul
      {
          display: none;
          position: absolute;
      }
      ul li a
      {
          display: block;
          text-decoration: none;
          color: #ffffff;
          border-top: 1px solid #ffffff;
          padding: 5px 15px 5px 15px;
          background: #2C5463;
          margin-left: 1px;
          white-space: nowrap;
          text-align: center;
      }
  
      ul li a:hover
      {
          background: #617F8A;
      }
      /* ul li:hover ul
      {
          display: block;
          position: absolute;
          text-align: center;
      }
      li:hover li
      {
          font-size: 13px;
      }*/
      li:hover a
      {
          background: #617F8A;
      }
      li:hover li a:hover
      {
          background: #2C5463;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>this is the jquery plugin link which i have used</p>
  
  <pre><code>http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js
  </code></pre>
  
  <p><strong>this is the jquery code</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $("#menu li").mouseover(function () {
              $(".submenu").stop().slideDown();
          });
      });
  
      $("#menu").mouseout(function () {
          $(".submenu").hide();
      }); 
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>here is the html</strong></p>
  
  <pre><code>&lt;div id="linkbar"&gt;
      &lt;ul id="menu"&gt;
          &lt;li style="margin-left: 2px;"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt; &lt;/li&gt;
          &lt;li&gt;&lt;a href="services.html"&gt;Services&lt;/a&gt;
              &lt;ul class="submenu"&gt;
                  &lt;li&gt;&lt;a href="trademarks.html" &gt;Trademarks&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="Patents.html" &gt;Patents&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="copyright.html"&gt;Copy Right&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="design registration.html" &gt;Design Registration&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="iso9001.html"&gt;ISO 9001&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="roc.html"&gt;Company Formation&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="importexpertcode.html"&gt;Import Export Code&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="shop establishment.html"&gt;Shop Extablishment&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="tax Duties.html"&gt;Tax- Duties&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="patnershipworks.html"&gt;Partnership Works&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="contactus.html"&gt;Contact us&lt;/a&gt; &lt;/li&gt;
          &lt;li&gt;&lt;a href="application status.html"&gt;Application Status&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>when i hover the mouse on ul menu it show the child menu
   but when it mouseout it does not hide the child ul ! what is wrong with it please help</p>
  
  <p><em>please suggest if there is any website to download simple jquery menus</em> </p>