为什么这个下拉菜单不工作？ [英] Why doesn't this drop down menu work?

问题描述

我已下载通过Styleshout.com刷新模板

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.

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

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：以下是代码：

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

推荐答案

您需要将LI左侧的容器浮动，并将弹出框中的top值设置为100％。
（仅在FF3.5中测试）

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;
}

这篇关于为什么这个下拉菜单不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！