纯CSS响应多级菜单

我正试图修改添加第3和第4级，但我的css知识不太深，正如您所看到的，结果非常糟糕：

除了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版本

---

请建议需要添加的内容

您可以对下拉列表应用固定宽度，然后调整边距以正确定位

将三级导航的代码更改为：

在第四级中添加以下内容：

/* fourth level */

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

---

你好谢谢你的回答，我实施了你的建议和其他一些改变，情况有所改善，但仍然不完美。特别是，当第三层打开时，第二层底部仍然是一个巨大的橙色正方形，我不知道如何避免。有什么建议吗？谢谢当然，只需将nav-li-li-ul{height:0；}添加到CSS中即可。太棒了！，我添加了一些小的更改和规则，将您最后的建议仅应用于最小宽度1000px，仅此而已。因为任何人都可能对这里感兴趣。

/* fourth level */

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