dropdown menu problem with IE!

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • saputello
    New Member
    • Apr 2008
    • 9

    dropdown menu problem with IE!

    hello!



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

    Teach your smart little menus to do the DHTML dropdown dance without sacrificing semantics, accessibility, or standards compliance or writing clunky code.


    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:
    [code=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>
    [/code]
    Javascript for IE:
    [code=javascript]
    <script type="text/javascript"><!--//--><![CDATA[//><!--

    startList = function() {
    if (document.all&& document.getEle mentById) {
    navRoot = document.getEle mentById("left" );
    for (i=0; i<navRoot.child Nodes.length; i++) {
    node = navRoot.childNo des[i];
    if (node.nodeName= ="LI") {
    node.onmouseove r=function() {
    this.className+ =" over";
    }
    node.onmouseout =function() {
    this.className= this.className. replace(" over", "");
    }
    }
    }
    }
    }
    window.onload=s tartList;

    //--><!]]></script>
    [/code]


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

    <li><a href="san_franc isco1.html">San Francisco</a>
    <ul>
    <li><a href="#" id="current">Ch inatown</a></li>
    <li><a href="downtown1 .html">Downtown </a></li>
    <li><a href="soma1.htm l">SoMa</a></li>
    <li><a href="mission1. html">The Mission</a></li>
    <li><a href="northBeac h1.html">North Beach</a></li>
    <li><a href="castro1.h tml">The Castro</a></li>

    </ul>
    </li>
    <li><a href="berkeley1 .html">Berkeley </a></li>
    <li><a href="santa_cru z1.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.





    thank you very much!
    Last edited by drhowarddrfine; Apr 9 '08, 09:41 PM. Reason: Please use code tags
  • drhowarddrfine
    Recognized Expert Expert
    • Sep 2006
    • 7434

    #2
    It doesn't work for me in FF either.

    Comment

    Working...