希望在HTML中有下拉菜单

这是您编辑的代码。这是一个开始,不是100%,但有多达4层。 http://www.jsfiddle.net/JaLnp/1/

javascript是针对那些不能处理链接外部css:hover命令的Internet浏览器的。

CSS

/* menu setup */
#menu, #menu ul {
    padding: 0px;
    margin: 0px;
    list-style: none;
}

#menu a {
    display: block;
    text-decoration:none;
    width: auto;
    color:#ffffff;
    background-color: #790808;
}

#menu li {
    margin-right: 2.5px;
    margin-left: 2.5px;
    padding:5px;
    float: left;
    width: auto;
    color:#ffffff;
    background-color: #790808;
}

/* first level of menu drop down */
#menu li ul {
    position: absolute;
    width: 150px;
    left: -999em;
}

#menu li:hover ul {
    left: auto;
    color:#ffffff;
    background-color: #790808;
}

#menu li:hover ul, #menu li.sfhover ul {
    left: auto;
    color:#ffffff;
    background-color: #790808;
}

#menu li ul ul {
    margin: -1em 0 0 85px;
    color:#ffffff;
    background-color: #790808;
}

#menu, #menu ul {
    padding: 0;
    margin: 0;
    list-style: none; 
    line-height: 1;
    color:#ffffff;
    background-color: #790808;
}

/* second level of menu drop down */
#menu li:hover ul ul, #menu li.sfhover ul ul {
    left: -999em;
    color:#ffffff;
    background-color: #790808;
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul {
    left: auto;
    color:#ffffff;
    background-color: #790808;
}

/* third level of menu drop down */
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li.sfhover ul ul, #menu li.sfhover ul ul ul {
    left: -999em;
    color:#ffffff;
    background-color: #790808;
}

#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul, #menu li li li.sfhover ul {
    left: auto;
    color:#ffffff;
    background-color: #790808;
}

/* forth level of menu drop down */
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li:hover ul ul ul ul, #menu li.sfhover ul ul, #menu li.sfhover ul ul ul, #menu li.sfhover ul ul ul ul {
    left: -999em;
    color:#ffffff;
    background-color: #790808;
}

#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li li li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul, #menu li li li.sfhover ul, #menu li li li li.sfhover ul {
    left: auto;
    color:#ffffff;
    background-color: #790808;
}

Javascript

// drop down list functionality for Internet Explore
// IE does not support the :hover in anything but links
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);

对于类似的事情,我建议使用jQuery。它允许您在任何时候创建弹出/下拉菜单。