dropdown menu problem with IE!

[saputello]

hello!



i found an article on making a dropdown menu at this page:

http://www.alistapart.com/articles/dropdowns/

i've had no problem making it work in every browser i've tried other than IE!!

perhaps someone can check out the code and let me know what i can do!

Here's the pertinent CSS:

<style type="text/css">
 
 
#left ul {
    font: 12px/22px Verdana, Arial, Helvetica, sans-serif;
    margin: 0px 0px 0px 0px;
    padding: 0;
    list-style: none;
    width: 150px;
    border-bottom: 1px solid #ccc;
    }
 
#left ul li {
    position: relative;
    }
 
 
#left li ul {
    position: absolute;
    left: 149px;
    top: 0;
    display: none;
    }
 
 
#left ul li a {
    display: block;
    text-decoration: none;
    color: #777;
    background: #fff;
    padding: 5px;
    border: 1px solid #ccc;
    border-bottom: 0;
    }
 
 
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
 
#left li:hover ul, li.over ul { 
    display: block; }
 
 
</style>
 

Javascript for IE:

<script type="text/javascript"><!--//--><![CDATA[//><!--
 
startList = function() {
    if (document.all&&document.getElementById) {
        navRoot = document.getElementById("left");
        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;
 
//--><!]]></script>
 

and here's the html:
[html]
<ul>

<li><a href="san_francisco1.html">San Francisco</a>
<ul>
<li><a href="#" id="current">Chinatown</a></li>
<li><a href="downtown1.html">Downtown</a></li>
<li><a href="soma1.html">SoMa</a></li>
<li><a href="mission1.html">The Mission</a></li>
<li><a href="northBeach1.html">North Beach</a></li>
<li><a href="castro1.html">The Castro</a></li>

</ul>
</li>
<li><a href="berkeley1.html">Berkeley</a></li>
<li><a href="santa_cruz1.html">Santa Cruz</a></li>
<li><a href="big_sur1.html">Big Sur</a></li>
</ul>
[/html]

I've tried many variations but can't get it to work.


http://www.nostramerica.com/chinatown2.html


thank you very much!

[drhowarddrfine]

It doesn't work for me in FF either.