html - 如何修复这个第二层下拉菜单背景？

Question

我对我的下拉菜单很满意，但有一个部分我做错了。

它是关于最后一个菜单项（Switch City），下拉的第二层扩展了第一层的背景。

我用它做了一支笔：https ://codepen.io/pascalgarrix/pen/byNLEM

我很确定 CSS 中的问题就在这部分的媒体查询之前：

nav ul ul ul {
position: relative;
/* has to be the same number as the "width" of "nav ul ul li" */
top: -60px;
left: 270px;

}

如果有人可以快速浏览一下，那就太棒了！

PS 整个菜单都是基于这支 Pen：https ://codepen.io/andornagy/pen/RNeydj

标签： htmlcssdropdownresponsive

Answer 1

您需要给第一级嵌套 li 一个最大高度以防止它增长，但仍然允许溢出

nav ul li ul li:hover, nav ul li ul li ul li:hover { background-color: rgba(0,0,0,0.2); max-height:70px; }