Why doesn't this drop down menu work?

Question

Hello!

I've download the Refresh template by Styleshout.com since I really like it. But unfortunately, there was no drop down menu in it, only a normal menu.

So I tried to integrate a drop down menu which I found a nice tutorial for.

It does almost work - almost. Here's the result: the template on my webspace.

The menus are opened - but at the wrong location. Why? What's wrong with my implementation? All 3 drop down lists are opened under the first item.

I hope you can help me. Thanks in advance!

PS: Here's the code:

####################
####### HTML #######
####################
<ul id="nav">
    <li><a href="index.html">Nav #1</a>
        <ul>
            <li><a href="#">Nav #1.1</a></li>
            <li><a href="#">Nav #1.2</a></li>
        </ul>
    </li>
    <li><a href="index.html">Nav #2</a>
        <ul>
            <li><a href="#">Nav #2.1</a></li>
            <li><a href="#">Nav #2.2</a></li>
        </ul>
    </li>
    <li><a href="index.html">Nav #3</a>
        <ul>
            <li><a href="#">Nav #3.1</a></li>
            <li><a href="#">Nav #3.2</a></li>
        </ul>
    </li>
</ul>

####################
#### JAVASCRIPT ####
####################
sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

###################
####### CSS #######
###################
ul#nav li ul {
    position: absolute;
    left: -9999px;
    top: 38px;
    display: block;
    width: 100px;
    background-color: transparent;
}
ul#nav li {
    position: relative;
}
ul#nav li ul li {
    float: none;
}
/* Links in the drop down lists start */
ul#nav li ul li a {
    clear: left;
    display: block;
    text-decoration: none;
    width: 100px;
    background-color: #333;
}
/* Links in the drop down lists end */
/* Making visible start */
ul#nav li:hover ul, #nav li.sfhover ul {
    left: auto;
}
/* Making visible end */

Answer 1

You need to float the container LI's left and set the 'top' value on the pop-up boxes to 100%. (Tested only in FF3.5)

ul#nav li {
    position: relative;
    float: left;
}

ul#nav li ul {
    position: absolute;
    left: -9999px;
    top: 100%;
    display: block;
    width: 100px;
    background-color: transparent;
}

Answer 2

Doesn't really explain it directly, but I would reccomend adding and subtracting a class attribute, not modifying (getAttribute, removeAttribute, etc.). Also, your class name has a space in it ( " sfhover" ) which probably isn't a good idea.

Answer 3

Here:

 <li>
    <a>Nav #1</a>
    <ul>
       <li>Nav #1.1</li> 
    <ul>
 </li>

To move the entire menu and its submenu. You will have to set float:left at <li> not <a>

#menu ul li a { 
 float: none;
}
#menu ul li { 
 float: left;
}

One more thing, this doesn't relate to your problem. But, I think you should use display:none/block instead of left:-9999px/auto.

Hope it help.