Question

我试图修改This project of Osvaldas Valutis添加第3级和第4级，但我的css知识不是那么深，结果，你可以看到HERE非常差：

除了HTML之外，在CSS方面我添加了

* third level */

#nav li li li{
    background-color: #cc470d;
    display: none;
    position: absolute;
    top: 100%;
}
#nav li li:hover li {
    display: block;
    left: 2px;
    top:0px;
    right: 0;
}
#nav li:not( :first-child ):hover ul li ul li {
    left: 240px;
    top:-50px;
}
#nav li ul li ul a {
    font-size: 1.25em; /* 20 */
    border-top: 1px solid #e15a1f;
    padding: 0.75em; /* 15 (20) */
}

#nav li ul li ul li a:hover, #nav li ul li ul:not( :hover ) li.active a {
    background-color: #e15a1f;
}

但显然这还不够，然后我还要处理@media版本。

可以建议需要添加的内容

Answer 1

您可以将固定宽度应用于下拉列表，然后调整边距以正确定位它们。

将第三级#nav li li li的代码更改为：

/* third level */

#nav li li li {
    background-color: #cc470d;
    display: none;
    position: absolute;
    top: 100%;
    width: 240px; /* will also set width for child dropdown */
    margin-top: -1px;
    margin-left: 2px;
}

并将其添加到第四级：

/* fourth level */

#nav li li li li {
  margin-left: 1px;
}

纯CSS响应多级菜单

1 个答案: