jquery menu

jquery menu

hi guys
 i am brand new to forums and jquery so bear with me.
this is my problem:
its to do with drop down menus.
the code works fine on normal menu but I can seem to get it tio work on sub menu:(
I would like to bring in different content  into the same div.
 here is the html for the menu the menu is at the bottom of the site  opening up instead of down.
<ul id="nav">
    <li><a href="home.html">HOME</a></li>
    <li><a href="AboutUs.html">ABOUT US</a></li>
    <li><a href="partners.html">PARTNER</a></li>
    <li><a href="productpage.html">PRODUCT</a>
        <ul>
            <li><a href="aggreagate">Aggreator</a></li>
            <li><a href="cement">Cement</a></li>
            <li><a href="concrete">Concreate</a></li>
        </ul>
    </li>
      <li><a href="Projects.html">PROJECTS</a></li>
      <li style="width:120px"><a href="Transformation.html">TRANSFORMATION</a></li>
    <li style="width:100px"><a href="ContactUs.html">CONTACT US</a>
        <ul>
            <li><a href="cement.html">CEMENT</a></li>
            <li><a href="cement.html">Durban</a></li>
            <li><a href="cement.html">Simune</a></li>
            <li><a href="cement.html">Newcastel</a></li>
            <li><a href="cement.html">Durban</a></li>
            <li><a href="cement.html">Margate</a></li>
            <li><a href="cement.html">Tongaat Plant</a></li>
            <li><a href="cement.html">Spruit</a></li>
            <li><a href="cement.html">Park Ryne</a></li>
            <li><a href="cement.html">Phoenix</a></li>
            <li><a href="cement.html">Umlaas Road</a></li>
            <li><a href="cement.html">Aggregate</a></li>
            <li><a href="cement.html">Margate Aggreage</a></li>
            <li><a href="cement.html">Spruit</a></li>
            <li><a href="credit.html">Credit Card Application</a></li>   
            <li><a href="aggregate.html">Aggregate</a></li>
            <li><a href="complaints&compliments.html">Compliments and Complaints</a></li>
           
        </ul>
    </li>
    <li style="width:120px"><a href="RequestAquote.html">REQUEST QUOTE</a></li>
    <li style="width:120px"><a href="NPCNews.html">NPC NEWS</a></li>
   
</ul>

 here is the jquery
$(document).ready(function(){
    $('#content').load('Content/home.html');
   
    //handle menu clicks
    $('ul#nav li a').click(function(){
    var page = $(this).attr('href');
    $('#content').load('Content/' + page + '.html');
    return false;
    });
    });

 i have highlighted where i think the problem is but need guidance??

any help would  be appreciated

kate