title: Hide ul when lost focus in JQuery
body: <p>I am trying to hide the sub menu items(ul) when it lost focus.. my structure looks something like this</p>
  
  <pre><code>            &lt;div id="ActionDiv" style="border-color: #0099d4; width: 120px; height: 100%"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;&lt;span id="ActionHeader"&gt;Action &amp;nbsp; &lt;em&gt;
                          &lt;img src="images/zonebar-downarrow.png" alt="dropdown" /&gt;
                      &lt;/em&gt;&lt;/span&gt;&lt;/a&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href="javascript:TriggerAction(1)"&gt;Send Email&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="javascript:TriggerAction(1)"&gt;Invite to chat&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="javascript:TriggerAction(1)"&gt;Consider For Opp&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>In JQuery i have used <strong>focusout</strong> event to handle the lost focus.</p>
  
  <pre><code>$("#ActionDiv&gt;ul&gt;li&gt;ul").focusout(function() {
              $("#ActionDiv&gt;ul&gt;li&gt;ul").hide();
  });
  </code></pre>
  
  <p>But the above code is not working. can anyone recommend a way to handle the lost focus event in the ul.</p>