如何修复第二层下拉菜单背景?

时间:2019-05-06 21:01:25

标签: html css dropdown responsive

我对下拉菜单非常满意,但是有一部分我无法正确理解。

关于最后一个菜单项(切换城市),下拉菜单的第二层扩展了第一层的背景。

我为此写下了一支笔: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;

}

如果有人可以快速浏览一下,那就太好了!

P.S。整个菜单基于此笔:https://codepen.io/andornagy/pen/RNeydj

1 个答案:

答案 0 :(得分:0)

您需要为第一层嵌套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; }