Html Can'；t从下拉菜单中删除背景

我是CSS的新手。有人能帮我理解我做错了什么吗。我特别关注下拉菜单的背景，它似乎是从父ul继承的。但是我想创建一个输出，其中背景独立于父ul。我的输出如下： 鉴于预期产出为： 我正在努力学习从w3schools网站创建CSS下拉列表。 代码：

.navbar{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#333；
}
李{
浮动：左；
}
LIA、.下拉按钮{
显示：内联块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
.navbar li:将鼠标悬停在.navbar.dropdown上。下拉按钮{
背景色：红色；
}
.导航栏.下拉列表{
显示：内联块；
}
.navbar.dropdown.dropdown内容{
z指数：1；
背景颜色：灰色；
颜色：橙色；
显示：无；
宽度：200px；
}
.navbar.dropdown.dropdown内容a{
显示：块；
填充：15px 20px；
背景色：白色；
颜色：黑色；
文本对齐：居中；
垂直对齐：居中；
}
.navbar.dropdown.dropdown内容a:悬停{
背景色：红色；
}
.navbar.dropdown:悬停.下拉内容{
显示：块；
}
.网页内容{
显示：内联块；
}

您可以为下拉菜单添加以下css：

看

CSS:

---

您需要将您的下拉列表

div

从文档流中删除-使用

position:absolute

.navbar{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#333；
}
李{
浮动：左；
}
李a,，
.下拉按钮{
显示：内联块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
.navbar li:将鼠标悬停在a上，
.navbar.dropdown.dropdown按钮{
背景色：红色；
}
.导航栏.下拉列表{
显示：内联块；
}
.navbar.dropdown.dropdown内容{
z指数：1；
背景颜色：灰色；
颜色：橙色；
显示：无；
宽度：200px；
位置：绝对位置；
盒影：-2px3px7px#BBB；
}
.navbar.dropdown.dropdown内容a{
显示：块；
填充：15px 20px；
背景色：白色；
颜色：黑色；
文本对齐：居中；
垂直对齐：居中；
}
.navbar.dropdown.dropdown内容a:悬停{
背景色：红色；
}
.navbar.dropdown:悬停.下拉内容{
显示：块；
}
.网页内容{
显示：内联块；
}

---

在此添加

位置：绝对

和瞧。

使用“绝对位置”下拉列表内容和“相对位置”下拉列表。下面是css

.navbar .dropdown {
    display: inline-block;
    position: relative;
}

.navbar .dropdown .dropdown-content {
    z-index: 1;
    background-color: grey;
    color: orange;
    display: none;
    width: 200px;
    position: absolute;
    left: 0px;
    top: 100%;
}

---

这不是关于任何“背景”，而是关于元素所占据的空间。如果您不希望打开的子菜单向下推页面的其余内容，那么您需要绝对定位它。感谢您解释代码背后的基本原理。

.navbar .dropdown .dropdown-content {
z-index: 1;
background-color: grey;
color: orange;
display: none;
width: 200px;
}

.navbar .dropdown {
    display: inline-block;
    position: relative;
}

.navbar .dropdown .dropdown-content {
    z-index: 1;
    background-color: grey;
    color: orange;
    display: none;
    width: 200px;
    position: absolute;
    left: 0px;
    top: 100%;
}