Question

我正在开发一个HTML静态网站。我差不多做了一切。最后，我需要有下拉菜单。我尝试添加一些额外的代码来下载菜单。但是，它正在影响我现有的风格。请有人帮忙修改我的代码以获得dropmenu。

代码： http://www.jsfiddle.net/mohamedsaligh/mkYrt/

确实帮助。

谢谢：）

Answer 1

对于类似的东西，我建议使用jQuery。它允许您立即创建弹出/下拉菜单。

Answer 2

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

javascript适用于无法在链接外处理css：hover命令的Internet Explorers。

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

想要HTML格式的下拉菜单

2 个答案:

CSS

的Javascript