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

标签 html css dropdown responsive

我对我的下拉菜单非常满意,但有一部分我做错了。

关于最后一个菜单项(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;

如果有人能快速浏览一下,那就太棒了!

附言整个菜单基于这支笔:https://codepen.io/andornagy/pen/RNeydj

最佳答案

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

nav ul li ul li:hover, nav ul li ul li ul li:hover { 背景色:rgba(0,0,0,0.2); 最大高度:70px; }

关于html - 如何修复此第二层下拉菜单背景?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56012398/

相关文章:

java - 基于下拉列表选择的 If 语句

日期 DD-MM-YYYY 的正则表达式

css - 媒体查询适用于浏览器调整大小但不适用于移动设备

css - 更改为引导下拉菜单透明背景色

CSS 属性自动组织器

validation - flutter 下拉菜单,选择在验证错误时被禁用

javascript - Web Worker Javascript 无法找到其他 javascript 文件中的函数

python - Xpath在scrapy 0.24.5中选择两个节点之间的节点

html - 如何在 Angular 项目中加载图像(和其他 Assets )?

javascript - 如何将 jQuery 过滤器添加到 html 表中?