[решено] Выпадающее меню в CSS. Прблеммы в IE

Добрый день.
По примеру урока http://www.webmascon.com/topics/coding/42a.asp
создал аналогичную менюшку, но работает она в IE с глюком.
Когда навожу на меню1, то выпадает меню, но когда пытаюсь навести на подменю,
то оно исчезает. В Опере все ок.
Помгите пожалуйста.

Вот пример выпадающего меню:

Код:

<body> 

<ul id="nav"> 

  <li><a href="#">About</a> 

    <ul> 

      <li><a href="#">History</a></li> 

      <li><a href="#">Team</a></li> 

      <li><a href="#">Offices</a></li> 

    </ul> 

  </li> 

</ul> 

</body>

</html>

Стиль, что бы меню выпадало вправо:
(В Internet Explorer)
Изменил только вот это
li ul {
position: absolute;
left:0;
top: 23;
display: none;
}

Код:

<style type="text/css">

body {

        font: normal 11px verdana;

        }



ul {

        margin: 0;

        padding: 0;

        list-style: none;

        width: 150px; /* Width of Menu Items */

        border-bottom: 1px solid #ccc;

        }

        

ul li {

        position: relative;

        }

        

li ul {

        position: absolute;

        left:0;

        top: 23;

        display: none;

        }



/* Styles for Menu Items */

ul li a {

        display: block;

        text-decoration: none;

        color: #777;

        background: #fff; /* IE6 Bug */

        padding: 5px;

        border: 1px solid #ccc; /* IE6 Bug */

        border-bottom: 0;

        }

        

/* Holly Hack. IE Requirement \*/

* html ul li { float: none; height: 1%; }

* html ul li a { height: 1%; }

/* End */



li:hover ul, li.over ul { display: block; } /* The magic */

</style>

А вот вправо, здесь все ок. С этого я собственно и модифицировал:

Код:

<style type="text/css">

body {

        font: normal 11px verdana;

        }



ul {

        margin: 0;

        padding: 0;

        list-style: none;

        width: 150px; /* Width of Menu Items */

        border-bottom: 1px solid #ccc;

        }

        

ul li {

        position: relative;

        }

        

li ul {

        position: absolute;

        left: 149px; /* Set 1px less than menu width */

        top: 0;

        display: none;

        }



/* Styles for Menu Items */

ul li a {

        display: block;

        text-decoration: none;

        color: #777;

        background: #fff; /* IE6 Bug */

        padding: 5px;

        border: 1px solid #ccc; /* IE6 Bug */

        border-bottom: 0;

        }

        

/* Holly Hack. IE Requirement \*/

* html ul li { float: left; height: 1%; }

* html ul li a { height: 1%; }

/* End */



li:hover ul, li.over ul { display: block; } /* The magic */

</style>

еще встроенный скрипт:

Код:

// JavaScript Document



startList = function() {

if (document.all&&document.getElementById) {

navRoot = document.getElementById("nav");

for (i=0; i<navRoot.childNodes.length; i++) {

node = navRoot.childNodes[i];

if (node.nodeName=="LI") {

node.onmouseover=function() {

this.className+=" over";

  }

  node.onmouseout=function() {

  this.className=this.className.replace(" over", "");

   }

   }

  }

 }

}

window.onload=startList;