javascript - 为什么这个下拉菜单不起作用？

Question

我已经下载了 Refresh template by Styleshout.com因为我真的很喜欢它。但不幸的是，里面没有下拉菜单，只有一个普通的菜单。

所以我尝试整合一个下拉菜单which I found a nice tutorial for .

它几乎可以工作 - 几乎。结果如下:the template on my webspace .

菜单已打开 - 但位置错误。为什么？我的实现有什么问题？所有 3 个下拉列表都在第一个元素下打开。

我希望你能帮助我。提前致谢!

PS:代码如下:

####################
####### 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

您需要将容器 LI 向左浮动，并将弹出框中的“顶部”值设置为 100%。 (仅在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;
}