Hide ul when lost focus in JQuery

Question

I am trying to hide the sub menu items(ul) when it lost focus.. my structure looks something like this

            <div id="ActionDiv" style="border-color: #0099d4; width: 120px; height: 100%">
                <ul>
                    <li><a href="#"><span id="ActionHeader">Action &nbsp; <em>
                        <img src="images/zonebar-downarrow.png" alt="dropdown" />
                    </em></span></a>
                        <ul>
                            <li><a href="javascript:TriggerAction(1)">Send Email</a></li>
                            <li><a href="javascript:TriggerAction(1)">Invite to chat</a></li>
                            <li><a href="javascript:TriggerAction(1)">Consider For Opp</a></li>
                        </ul>
                    </li>
                </ul>
            </div>

In JQuery i have used focusout event to handle the lost focus.

$("#ActionDiv>ul>li>ul").focusout(function() {
            $("#ActionDiv>ul>li>ul").hide();
});

But the above code is not working. can anyone recommend a way to handle the lost focus event in the ul.

Answer 1

Try .hover() event in jQuery

$("#ActionDiv>ul>li>ul").hover(function() {
       $("#ActionDiv>ul>li>ul").show();
   },
   function(){
       $("#ActionDiv>ul>li>ul").hide();
});

Answer 2

Elements other than input (and textarea) have no native (so far as I'm aware, though leave comments if I'm wrong!) focus or blur events (they're designed to respond to user-input, rather than mouse-position-events; albeit the a elements within the various ul and li elements can be focused, and that event might propagate, though I suspect the focusout event won't).

You can use hover() though:

$('#elementID').hover(
function(){
   // mouse-over
},
function(){
  // mouse-out
});