Hi everyone, I posted a little while ago http://forum.jquery.com/topic/question-about-effects-in-ie8 about a problem I was having with animation which was caused by my use of inline-blocks. Someone pointed out at the time that my site wasn't going to work with older versions of IE and i've just gotten around to fixing it.

 

My Site: http://www.gardengenius.co.uk

 

The Problem: The nav menu at the top is animated using JQuery, in IE7 the drop down menus were appearing behind other animated elements like the popular and special products on the right hand side of the home page. I've fixed this by moving the nav div to the end of the DOM using this function

 

function moveNavMenuForIE7() {
        if(navigator.appVersion.indexOf('MSIE 7') > -1) {                         
               var navmenu = document.getElementById('nav');                        
               document.body.appendChild(navmenu);
  

              nav.style.position= 'absolute';
              nav.style.zIndex = '30000';
              nav.style.top= '100px';
              nav.style.left= '295px';
  }};
  

moveNavMenuForIE7(); 

 

That all works fine and the menu now appears on top of everything else like i'd expect however the drop down sub-menu width doesnt expand until after the animation completes.

 

I've had a look on google and some forums and found a few other people with the same problem but I can't find a solution.

 

Is there a way I can force the drop down menu to assume the correct width before the animation is triggered?

 

Thanks very much in advance for any help.