CSS和HTML-下拉菜单下推内容--位置：相对和绝对不工作

我正试图用我的WordPressHTML来设计我创建的导航菜单。我已经设置了

：hover

功能，下拉列表已经就位。当鼠标悬停在我的网站上时，它会向下推我网站上的内容。我尝试了

z-index

fix以及

位置：relative和
位置：绝对。如果我使用相对位置和绝对位置固定，下拉菜单会做这种奇怪的事情，背景色消失，我的所有子菜单
ul
s相互重叠。关于原因有什么建议吗

这是我上传所有内容的JSFIDLE

这是我到目前为止得到的CSS


#菜单apl{
背景色：#63afe6；
宽度：100%；
}
li.下拉列表{
列表样式：无；
背景色：#63afe6；
浮动：左；
颜色：白色；
}
李阿{
显示：块；
颜色：白色；
文本对齐：居中；
利润率：10px；
左侧填充：25px；
右边填充：25px；
文字装饰：无；
}
//////////////
.下拉列表{
显示：内联块；
背景色：#63afe6；
}
.下拉项{
显示：无；
宽度：200px；
列表样式：无；
}
.下拉列表：悬停。下拉列表项{
显示：块；
}





























我清理了您的代码，删除了HTML中与此问题无关的所有内容，以避免分心。然后我编辑了CSS

两件事：

您需要删除CSS中的所有斜杠，因为它们使其无效，这会导致它们后面的下一个样式块无法应用
要使相对/绝对定位组合正确工作，您需要确保定位正确
以前，您关注的是菜单项本身–这就是您从
display:none
切换到
display:block
的原因，我怀疑这也是您试图定位的。如果您绝对定位所有菜单项并为它们提供所有样式，例如，
top:0；左：0
，它们将彼此并排坐在一起。相反，尝试将列表（即
ul.子菜单
）相对于其父列表项（即
li.下拉列表
）定位

从那里，您可以使用直接同级选择器
+
更改悬停时的样式。因此，当您将链接悬停时，子菜单会在其出现后立即显示

最后要做的一件事是给下拉菜单加上背景色，以确保你能真正看到它的实际效果，所以我在下面也做了这件事


#菜单apl{
背景色：#63afe6；
宽度：100%；
}
李阿{
显示：块；
颜色：白色；
文本对齐：居中；
利润率：10px；
左侧填充：25px；
右边填充：25px；
文字装饰：无；
}
.下拉列表{
列表样式：无；
背景色：#63afe6；
浮动：左；
显示：内联块；
颜色：白色；
背景色：#63afe6；
位置：相对位置；
}
.下拉项{
宽度：200px；
列表样式：无；
}
.子菜单{
显示：无；
位置：绝对位置；
最高：100%；
左：0；
背景色：#63afe6；
}
.下拉菜单a:悬停+.子菜单{
显示：块；
}