아... 언제나... IE는 이상하고 FF은 똑바로 나오고...ㅠㅠ
테스트는 IE6,7 하고요 파이어폭스 해봤는데요 FF는 원하는대로 잘 나옵니다
그런데 문제는 IE에서...ㅜㅜ

코딩한 페이지 주소는
 이거고요..
하단에 "패밀리사이트" 라는 부분이거든요...
FF에서 보이는것 처럼 할려고 했는데
IE에서는 롤오버 했다가 떼보면 미친듯이 왔다갔다 거리더라고요;;

코딩한 소스고요

<div id="drop">
<ul class="menu" id="menu">
    <li>
        <a href="#" class="menulink">패밀리사이트</a>
        <ul>
            <li><a href="슈어홀릭#">슈어홀릭</a></li>
            <li><a href="러브실버#">러브실버</a></li>
        </ul>
    </li>
</ul>
</div>
<script type="text/javascript">
    var menu=new menu.dd("menu");
    menu.init("menu","menuhover");
</script>

자바스크립트는..

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   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}
}();

CSS..

#drop {font:11px Verdana,Arial; float:right;}
ul.menu {list-style:none; margin:0; padding:0}
ul.menu * {margin:0; padding:0}
ul.menu a {display:block; color:#000; text-decoration:none}
ul.menu li {position:relative; float:left; margin-right:2px}
ul.menu ul {position：absolute; top:26px; left:0; background:#d1d1d1; display：none; opacity:0; list-style:none}
ul.menu ul li {position:relative; border:1px solid #aaa; border-top:none; width:148px; margin:0}
ul.menu ul li a {display:block; padding:3px 7px 5px; background-color:#e5e5e5}
ul.menu ul li a:hover {background-color:#c5c5c5}
ul.menu ul ul {left:148px; top:-1px}
ul.menu .menulink {border:1px solid #aaa; padding:5px 7px 7px; font-weight:bold; background:url(images/header.gif); width:134px}
ul.menu .menulink:hover, ul.menu .menuhover {background:url(images/header_over.gif)}
ul.menu .sub {background:#d1d1d1 url(images/arrow.gif) 136px 8px no-repeat}
ul.menu .topline {border-top:1px solid #aaa}

CSS에서의 핵의 개념을 아직 잘 모릅니다...
왜 IE에서는 FF에서처럼 안나오는지도 모르겠구요...
아시는 분들 도와주세요 ㅠㅠ