1

我正在尝试使用纯 CSS 创建一个下拉菜单。它可以正常工作到第 4 级，但是当我尝试以某种方式添加第 5 级时，它无法按预期工作。这是我的代码链接：http: //jsfiddle.net/pX6C6/5/

CSS部分：

    #menu table {
    border-collapse:collapse;
    position:absolute;
    top:0;
    left:0;
    z-index:80;
    font-size:1em;
}
#menu li a {
    display:block;
    height:30px;
    font-family:arial, sans-serif;
    font-size:13px;
    letter-spacing:-1px;
    line-height:29px;
    width:125px;
    text-decoration:none;
    text-align:center;
}
#menu :hover {
    color:#ffffff;
    background:#5F90D0;
}
#menu :hover > a {
    color:#ffffff;
    background:#5F90D0;
}
#menu ul, #menu :hover ul ul, #menu :hover ul :hover ul ul, #menu :hover ul :hover ul:hover ul ul, #menu :hover ul :hover ul:hover ul:hover ul ul, #menu :hover ul :hover ul:hover ul:hover ul:hover ul, #menu :hover ul :hover ul:hover ul:hover ul:hover ul.left {
    position:absolute;
    left:-9999px;
    width:128px;
}

#menu :hover ul :hover ul, #menu :hover ul :hover ul :hover ul, #menu :hover ul :hover ul :hover ul:hover ul, #menu :hover ul :hover ul :hover ul:hover ul:hover ul, #menu :hover ul :hover ul :hover ul:hover ul :hover ul:hover ul {
    padding:0 3px;
    left:125px;
    top:-3px;
}
#menu :hover ul :hover ul.left, #menu :hover ul :hover ul :hover ul.left, #menu :hover ul :hover ul :hover ul:hover ul.left, #menu :hover ul :hover ul :hover ul:hover ul.left {
    padding:0 3px;
    left:-131px;
    top:-3px;
}
#menu {
    list-style-type:none;
    padding:0;
    margin:0;
}
#menu ul {
    list-style-type:none;
    padding:0;
    margin:0;
}
#menu li {
    float:left;
    background:#949494;
    margin:3px 3px 0 0;
    position:relative;
}

有没有人对如何解决这个问题有任何建议？提前致谢。

4

1 回答 1

0

您希望菜单的行为如何？

TBH 我不想尝试修复您的代码，因为它看起来太复杂了。

简单的多级菜单可以这样完成：jsfiddle.net/jPG3P/1/

ul, li {
    margin: 0;
    padding: 0;
}

#menu li {
    list-style-type: none;
}

#menu li a {
    display: block;
    background: #aaf;
    height: 25px;
    width: 120px;
    line-height: 25px;
    text-decoration: none;
    color: #000;
    border: 1px solid #fff;
    border-bottom: 0;
}

#menu li a:hover {
    background: #ff7e00;
    color: #fff;
}

#menu li ul {
    display: none;
    margin: -26px 0 0 120px;
    position: absolute;
}

#menu li:hover>ul {
    display: block;
}

可以通过添加以下内容来实现与您类似的另一个选项：http: //jsfiddle.net/jPG3P/2/

#menu>li {
    float: left;
}

#menu>li>ul {
    margin: 0;
}

如果你添加这个，它将突出显示所有选择的项目：http: //jsfiddle.net/jPG3P/4/

li:hover>a {
    background: #ff9f33;
}
于 2013-03-30T23:33:43.003 回答