为什么没有这个下拉菜单中的工作？(Why doesn't this drop down me

我已经下载了由Styleshout.com刷新模板 ，因为我真的很喜欢它。 但不幸的是，没有下拉的菜单它，只是一个普通的菜单。

所以，我想整合一个下拉菜单，我发现一个很好的教程 。

它几乎工作 - 差不多。 这里的结果是： 在我的网站空间的模板 。

菜单打开 - 但在错误的位置。 为什么？ 这有什么错我的执行？ 所有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:

您需要浮在容器李的左，设置弹出框，以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;
}

Answer 2:

我想原因它只有在Firefox的工作，或者我应该说只是在Firefox的工作，因为这是不久前发布的，是IE可能需要的顶级属性，而不是100％，具体像素位置。 我会建议您尝试0像素至少在IE浏览器，这个最近至少为我工作。

Answer 3:

并没有真正直接解释，但我会建议加和减一类属性，不修改（的getAttribute，的removeAttribute等）。 另外，你的类名中有一个空格（“sfhover”），这可能不是一个好主意。

Answer 4:

这里：

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

移动整个菜单和其子菜单。 你将不得不设置浮动：左在<LI> <a>中不

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

还有一两件事，这并不涉及您的问题。 但是，我认为你应该使用显示：无/块，而不是左：-9999px /自动。

希望它能帮助。

文章来源: Why doesn't this drop down menu work?