Jquery drop down menu not showing in IE7 and 8

Question

EDITED----------------------------------------

With help from users, we have discovered that the load is not working in the javascript. It is only for the topmenu file. Tried the dom ready function and this has not worked. Any further suggestions would be great!

   function loadHeader() 
{ 
   $("#header").load("http://www.garden-design-courses.co.uk/lib/header.html"); 
} 

function loadTopmenu() 
{ 
   $("#topmenu").load("http://www.garden-design-courses.co.uk/lib/topmenu.html");

}

I have a jquery menu that is not showing in IE7 or IE8. Below is the code

http://www.garden-design-courses.co.uk/

$("ul.subnav").parent().append("<span></span>"); 


$("ul.topnav li span").click(function() { //When trigger is clicked...

    //Following events are applied to the subnav itself (moving subnav up and down)
    $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

    $(this).parent().hover(function() {
    }, function(){  
        $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
    });

    //Following events are applied to the trigger (Hover events for the trigger)
    }).hover(function() { 
        $(this).addClass("subhover"); //On hover over, add class "subhover"
    }, function(){  //On Hover Out
        $(this).removeClass("subhover"); //On hover out, remove class "subhover"
});

The menu is

    <ul class="topnav"> 
    <li><a href="#" class="dip">Top Navigation</a>
     <ul class="subnav">
     <li>subnav</li>
     </ul>
    </li>
    </ul>

Answer 1

The problem isn't in that navigation code you have in your question, but in fact because the menu isn't even getting loaded onto the page.

Profiling the code on IE shows that the loadTopmenu function is getting called, but obviously the contents of it aren't getting loaded onto the page.

Try modifying your loadTopmenu to only be called when the DOM is ready:

function loadTopmenu() 
{ 
   $(function(){
   $("#topmenu").load("http://www.garden-design-courses.co.uk/lib/topmenu.html");
   }); 
}

Answer 2

When I get this behavior it's due to me forgetting to wrap everything up in

$(function(){
...
});

Without it it will work in most browsers except for IE..