jquery loads menu from external html but animation will not work

I created a navigation which slides down in jquery. It worked perfectly however I want to have the menu (unordered list) in a separate html file so when changed it implements across all my sites pages.

I used the following code to load the html file into the div "menucontainer"

$(document).ready(function(){

$( "#menucontainer" ).append(

   $( '<div>' ).load( 'navigation.html' )
    );
});

The top level of the menu is displayed however when I hover over the menu the sub menu no longer slides down

Here is the animation code

 $("#nav li").hoverIntent({sensitivity: 7, interval: 10, over: showNav, timeout: 20, out: hideNav});

 function showNav() {
 $("ul", this).slideDown(500);

 }

 function hideNav() {   
 $("ul", this).stop(true, true).slideUp(500);

 };

Here is navigation.html

<ul id="nav">
    <li id= "1"><a href="#">CARS</a>
    <ul>
    <li id= "11"><a href="#" class="clicked_link">Link1</a></li>
    </ul></li>
    <li id= "2"><a href="#" class=>NEWS / EVENTS</a>
        <ul>
            <li id= "21"><a href="#" class="clicked_link">Latest News</a></li>
            <li id= "22"><a href="#" class="clicked_link">Upcoming Events</a></li>
            <li id= "23"><a href="#" class="clicked_link">Calendar</a></li>
            <li id= "24"><a href="#" class="clicked_link">Research and Development</a></li>
        </ul>
        <div class="clear"></div>
    </li>
    <li id= "3">&开发者_运维技巧lt;a href="#" class=>SERVICES</a>
    <ul>
        <li id= "31"><a href="#" class="clicked_link">Dealer Locator</a></li>
        <li id= "32"><a href="#" class="clicked_link">Hire Cars</a></li>
        <li id= "33"><a href="#" class="clicked_link">Finance</a></li>
        <li id= "34"><a href="#" class="clicked_link">Insurance</a></li>
        <li id= "35"><a href="#" class="clicked_link">Used Car Locator</a></li>
        <li id= "36"><a href="#" class="clicked_link">Factory Visits</a></li>
        <li id= "37"><a href="#" class="clicked_link">Chassis Records</a></li>
        <li id= "38"><a href="#" class="clicked_link">Contact Us</a></li>
    </ul>         
        <div class="clear"></div>
    </li>
    <li id= "4"><a href="#" class=>MEDIA</a>
    <ul>
        <li id= "41"><a href="#" class="clicked_link">Video</a></li>
        <li id= "42"><a href="#" class="clicked_link">Images</a></li>
        <li id= "43"><a href="#" class="clicked_link">Press Releases</a></li>
    </ul>         
        <div class="clear"></div>
    </li>
    <li id= "5"><a href="#" class=>SHOP</a>
    <ul>
        <li id= "51"><a href="#" class="clicked_link">Online Store</a></li>
    </ul>         
        <div class="clear"></div>
    </li>


</ul>

Any help would be greatly appreciated, Thank You

It looks like you are attaching these events before the items actually exist on the page.

You can test if this is the case easily by checking the length of this selector:

$("#nav li").length // probably == 0

Try this:

$(function(){
    $("#menucontainer").load("navigation.html", function() {
        $("#nav li").hoverIntent({ 
            sensitivity: 7, 
            interval: 10, 
            over: showNav, 
            timeout: 20, 
            out: hideNav
        });
    });
});

function showNav() {
    $(this).find("ul").slideDown(500);
}

function hideNav() {   
    $(this).find("ul").stop(true, true).slideUp(500);
};

You can pass a callback to the load() method that will fire once the load is complete.

.load( url, [data], [complete(responseText, textStatus, XMLHttpRequest)] )