jQuery UI Menu animation

Question

I am trying to animate the built in jQuery UI menu function. I have tried many different mothods and I think it should have something to do the with the "focus" event, here is the the code I have but it does not actually slide out the menu, what am I dong wrong?

$('.nav-menu').menu({
    position: {     my: "left top", 
            at: "left bottom", 
            collision: "none"
        },
    focus: function(even,ui){
            $(this).next("ul").slideDown("slow");
        }
    });

Any help would be greatly appreciated.

Edit:

Html structure for the menu:

<div class="menu">
    <div class="menu-main-menu-container">
        <ul id="menu-main-menu" class="nav-menu">
            <li id="menu-item-409" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-409"><a href="">HOME</a></li>
            <li id="menu-item-466" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-466"><a>Zenair CH801HD <span class="caret"></span></a>
                <ul class="sub-menu">
                    <li id="menu-item-482" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-482"><a href="">801 News</a></li>
                    <li id="menu-item-480" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-480"><a href="">Horizontal Tail Build</a></li>
                    <li id="menu-item-467" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-467"><a href="">Everything Unfiltered</a></li>
                </ul>
           </li>
           <li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-5"><a>Projects <span class="caret"></span></a>
               <ul class="sub-menu">
                   <li id="menu-item-408" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-408"><a href="">(APP-02)</a></li>
                   <li id="menu-item-412" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-412"><a href="">GoPro Gimbal Mount</a></li>
                   <li id="menu-item-411" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-411"><a href="">Garage Build</a></li>
             </ul>
        </li>
        <li id="menu-item-277" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-277"><a>Bearhawk <span class="caret"></span></a>
            <ul class="sub-menu">
                <li id="menu-item-414" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-414"><a href="">About The Bearhawk</a></li>
                <li id="menu-item-413" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-413"><a href="">Bearhawk Modeling</a></li>
            </ul>
       </li>
       <li id="menu-item-139" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-139"><a href="">About</a></li>
   </ul>
</div>      
</div>

I have tried to clean the code up here a little bit, this is the menu structure. The complete work in progress is available at http://sdlan.org/~mnewman