Html 如何使下拉菜单悬停，并设置背景窗口透明时，悬停？

如何使下拉菜单悬停，并设置背景窗口透明时，悬停

像这样：

下拉菜单悬停如下：

所以，当下拉菜单像背景模式一样悬停时，我想将背景窗口设置为透明

$（文档）.ready（函数（）{
$（“.dropdown”）.hover（函数（）{
$（“.background”）.show（）；
}，函数（）{
$（“.background”）.hide（）；
});
});
.dropbtn{
背景色：#4CAF50；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
.下拉列表{
位置：相对位置；
显示：内联块；
z指数：101；
}
.下拉内容{
显示：无；
位置：绝对位置；
右：0；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉内容a:悬停{背景色：#f1f1}
.下拉：悬停.下拉内容{
显示：块；
}
.dropdown:悬停.dropbtn{
背景色：#3e8e41；
}
.背景{
背景色：rgba（0,0,0,0.5）；
不透明度：0.5；
身高：100%；
左：0；
位置：固定；
排名：0；
宽度：100%；
z指数：100；
显示：无；
}

左边

$（文档）.ready（函数（）{
$（“.dropdown”）.hover（函数（）{
$（“.background”）.show（）；
}，函数（）{
$（“.background”）.hide（）；
});
});
.dropbtn{
背景色：#4CAF50；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
.下拉列表{
位置：相对位置；
显示：内联块；
z指数：101；
}
.下拉内容{
显示：无；
位置：绝对位置；
右：0；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉内容a:悬停{背景色：#f1f1}
.下拉：悬停.下拉内容{
显示：块；
}
.dropdown:悬停.dropbtn{
背景色：#3e8e41；
}
.背景{
背景色：rgba（0,0,0,0.5）；
不透明度：0.5；
身高：100%；
左：0；
位置：固定；
排名：0；
宽度：100%；
z指数：100；
显示：无；
}

左边
或简单地使用css-感谢code@ariefbruce


.dropbtn{
背景色：#4CAF50；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
.下拉列表{
位置：相对位置；
显示：内联块；
z指数：101；
}
.下拉内容{
显示：无；
位置：绝对位置；
右：0；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉内容a:悬停{背景色：#f1f1}
.下拉：悬停.下拉内容{
显示：块；
}
.dropdown:悬停.dropbtn{
背景色：#3e8e41；
}
.背景{
背景色：rgba（0,0,0,0.5）；
不透明度：0.5；
身高：100%；
左：0；
位置：固定；
排名：0；
宽度：100%；
z指数：-1；
显示：无；
}
.dropdown:hover>.background{display:block；}

左边
在此处共享您的代码。如何共享？这是链接