Drop down list issue in IE - width/animation conflict?

Hi,

I'm using a jQuery horizontal drop down nav list I found (here: http://www.leigeber.com/2008/11/drop-down-menu/ ), which works great except for one minor problem that only shows up in IE.

When the user hovers over the main tab, for the first split second the drop down is only the width of the main tab. Then it expands to the designated width.

Screen shot of problem:



Here is my .js:

// JavaScript Document

var menu=function(){
   var t=15,z=50,s=6,a;
   function dd(n){this.n=n; this.h=[]; this.c=[]}
   dd.prototype.init=function(p,c){
      a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
      for(i;i<l;i++){
         var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
         h.onmouseover=new Function(this.n+'.st('+i+',true)');
         h.onmouseout=new Function(this.n+'.st('+i+')');
      }
   }
   
   dd.prototype.st=function(x,f){
      var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
      clearInterval(c.t); c.style.overflow='hidden';
      if(f){
         p.className+=' '+a;
         if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
         if(c.mh==c.offsetHeight){c.style.overflow='visible'}
         else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}
      }else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
   }
   function sl(c,f){
      var h=c.offsetHeight;
      if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
         if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
         clearInterval(c.t); return
      }
      var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
      c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')';
      c.style.height=h+(d*f)+'px'
   }
   return{dd:dd}
}();


In case the problem isn't there, here is the css:

/* jquery dropdown menu */

ul.menu {list-style: none; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 0.9em; font-weight: normal;}
ul.menu * {margin:0; padding:0;}

ul.menu a {display: block; color:#999; text-decoration: none;}
ul.menu li {position: relative; float: left; margin-right: 0px; z-index: 100;}
ul.menu ul {position: absolute; top: 39px; left: 0; display: none; opacity: 0; list-style: none;}
ul.menu ul li {position: relative; border: 0px solid #fff; border-top: none; width: 200px; margin: 0;}

ul.menu ul li a {display: block; width: 165px; height: 27px; padding: 10px 0 0 15px; background: url(../images/menu/menu-drop-bg.gif) top left repeat-x; color: #1b75bc;}
ul.menu ul li a:hover {background: url(../images/menu/menu-drop-over-bg.gif) top left repeat-x; color: #fff;}

ul.menu ul ul {left: 140px; top: -1px;}
ul.menu .menulink {background: url(../images/menu/menu-top-plain-bg.jpg) top right no-repeat; border: 0px solid #aaa; padding: 12px 16px 12px 16px; font-weight: normal; width: auto; color: #1b75bc;}
ul.menu .menulink:hover, ul.menu .menuhover {background: url(../images/menu/menu-top-over-plain-bg.jpg) top right no-repeat; color: #fff;}
ul.menu .menulinkarr {background: url(../images/menu/menu-top-arrow-bg.jpg) top right no-repeat; border: 0px solid #aaa; padding: 12px 16px 12px 16px; font-weight: normal; width: auto; color: #1b75bc;}
ul.menu .menulinkarr:hover, ul.menu .menuhover {background: url(../images/menu/menu-top-over-arr-bg.jpg) top right no-repeat; color: #fff;}
ul.menu .selected {background: url(../images/menu/menu-top-over-arr-bg.jpg) top right no-repeat; border: 0px solid #aaa; padding: 12px 16px 12px 16px; font-weight: normal; width: auto; color: #fff;}
ul.menu .selected-plain {background: url(../images/menu/menu-top-over-plain-bg.jpg) top right no-repeat; border: 0px solid #aaa; padding: 12px 16px 12px 16px; font-weight: normal; width: auto; color: #fff;}
ul.menu .first {background: url(../images/menu/menu-drop-first-bg.gif) top left repeat-x; color: #1b75bc;}
ul.menu .first:hover {background: url(../images/menu/menu-drop-first-over-bg.gif) top left repeat-x; color: #fff;}
ul.menu .topline {border-top: 0px solid #aaa;}
ul.menu .phone {background: url(../images/menu/menu-top-plain-bg.jpg) top right no-repeat; width: 128px; color: #1b75bc; padding: 12px 15px 12px 15px; text-align: center;}


Thanks for any help.

Steph

• Topic Participants

• steph