problem with DHTML menus in IE

[electricphp]

I am using the following script which works perfectly in Firefox, but in Internet Explore it's not working as expected. Basically, sometimes, the rollover effect works, and sometimes it doesn't. Also the menu rolls out slower in IE than in firefox.

Any help in debugging this issue would be appreciated.

the menus can be seen here:

http://clinicalpharmconsult.com/indext.php

The javascript for the menus:

        var DDSPEED = 10;
        var DDTIMER = 15;
        var OFFSET = -2;
        var ZINT = 100;

        function ddMenu(id, d) {
            var h = document.getElementById(id + '-ddheader');
            var c = document.getElementById(id + '-ddcontent');
            clearInterval(c.timer);
            if (d == 1) {
                clearTimeout(h.timer);
                c.style.display = 'block';
                if (c.maxh && c.maxh <= c.offsetHeight) { return }
                else if (!c.maxh) {
                    c.style.height = 'auto';
                    c.maxh = c.offsetHeight;
                    c.style.height = '0px';
					
				
                }
                ZINT = ZINT + 1;
                c.style.zIndex = ZINT;
                c.timer = setInterval(function() { ddSlide(c, 1) }, DDTIMER);
            } else {
                h.timer = setTimeout(function() { ddCollapse(c) }, 50);
            }
        }

        function ddCollapse(c) {
            c.timer = setInterval(function() { ddSlide(c, -1) }, DDTIMER);
        }

        function cancelHide(id) {
            var h = document.getElementById(id + '-ddheader');
            var c = document.getElementById(id + '-ddcontent');
            clearTimeout(h.timer);
            clearInterval(c.timer);
            if (c.offsetHeight < c.maxh) {
                c.timer = setInterval(function() { ddSlide(c, 1) }, DDTIMER);
            }
        }

        function ddSlide(c, d) {
            var currh = c.offsetHeight;
            var dist;
            if (d == 1) {
                dist = Math.round((c.maxh - currh) / DDSPEED);
            } else {
                dist = Math.round(currh / DDSPEED);
            }
            if (dist <= 1 && d == 1) {
                dist = 1;
            }
            c.style.height = currh + (dist * d) + 'px';
            c.style.opacity = currh / c.maxh;
            c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
            if (currh > (c.maxh - 2) && d == 1) {
                clearInterval(c.timer);
            } else if (dist < 1 && d != 1) {
                clearInterval(c.timer);
                c.style.display = 'none';
            }
        }

the css for the menus:

body {font:12px Verdana, Arial, Helvetica}
* {padding:0; margin:0}
.dropdown {float:left; padding-right:0px;}
.dropdown dd {position:absolute;  width:139px; display:none; background:#fff; z-index:200; opacity:0}
.dropdown ul {list-style:none;}
.dropdown li {display:inline}
.dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#333; text-decoration:none; background:#fff; width:128px}
.dropdown a:hover {background:#d9e1e4; color:#000}
.dropdown .underline {border-bottom:1px solid #ccc}

.dropdown dt {padding:8px; font-weight:bold; cursor:pointer; border-left:1px solid #CAD5E9; border-top:1px solid #CAD5E9;border-bottom:1px solid #CAD5E9;}
.dropdown dt:hover {background:#E9EDF6;}