改进下拉菜单的代码（HTML / CSS / JavaScript）

Question

基于本教程 ，我为Styleshout.com构建了模板的下拉菜单。 medigerati帮助了我 ，使其现在可以正常工作-至少在Firefox 3.5和Internet Explorer 8中有效。

您可以在此处查看操作菜单。

但不幸的是，它并非在所有浏览器中都能正常运行。 例如，在Internet Explorer 6中-它显示不正确。

您能否告诉我如何改善代码使其在更多浏览器中运行？

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

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>

CSS：

ul#nav li ul {
    position: absolute;
    left: -9999px;
    top: 100%;
    display: block;
    width: 100px;
    background-color: transparent;
}
ul#nav li {
    position: relative;
    float: left;
}
/* 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 */

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

Answer 1

Javascript事件绑定在不同的浏览器中的工作方式有所不同。 尝试：

sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        addEvent(sfEls[i], "mouseover", function() {
            this.className+=" sfhover";
        });
        addEvent(sfEls[i], "mouseout", function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        });
    }
}

function addEvent(el, name, func) {
    if (el.attachEvent)
        el.attachEvent("on" + name, func);
    else
        el.addEventListener(name, func, false);
}

addEvent(window, "load", sfHover);

Quirksmode.org上有很多关于事件的好文章。

Answer 2

您是作为学习练习来做这件事，还是只想要一个好的导航栏类型菜单？ 如果是后者，我建议您使用YUI 3.0的MenuNav ，它已针对所有主要浏览器（包括IE6）进行了充分的测试。

Answer 3

查看Dojo Toolkit工具栏小部件 。 Dojo在所有浏览器中均能一致地工作，甚至为残障用户提供了可访问性。

固定在页面上的菜单小部件 （如示例所示）也可能是您所需要的。