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

Answer 2

我认为它仅在Firefox中工作的原因，或者我应该说只是在Firefox中工作，因为很久以前就发布了这个原因，IE可能需要顶级属性的特定像素位置而不是100％。我建议至少在IE上尝试使用0px，这至少对我来说至少有用。

Answer 3

没有直接解释它，但我建议添加和减去一个类属性，而不是修改（getAttribute，removeAttribute等）。此外，你的班级名称中有一个空格（“sfhover”），这可能不是一个好主意。

Answer 4

下面：

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

移动整个菜单及其子菜单。您必须在＆lt; li＆gt;处设置float：left不是＆lt; a＆gt;

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

还有一件事，这与你的问题无关。但是，我认为你应该使用display：none / block而不是left：-9999px / auto。

希望有所帮助。

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

4 个答案: