Css 当其祖先的位置设置为“相对”时，为什么下拉菜单会消失？

当我使用“position:absolute”添加下拉菜单时，我想将“position:relative”添加到它最近的祖先“li.dropDownBtn”中，并发现它会使整个下拉菜单消失。我一直想找出原因，但仍然没有答案。有人能帮我吗？非常感谢

导航栏{
列表样式类型：无；
边际：0px；
填充：0px；
溢出：隐藏；
背景色：#4277f4；
光标：指针；
}
李{
浮动：左；
}
李阿{
显示：内联块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
字体系列：Verdana，日内瓦，塔荷马，无衬线；
字体大小：20px；
文字装饰：无；
}
李：悬停{
背景色：#A2AEB3；
}
/*添加此选项后，下拉列表将消失
li.dropDownBtn{
职位：相对
}
*/
.下载内容{
显示：无；
位置：绝对位置；
背景色：#7DC9E3；
宽度：150px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
文字装饰：无；
}
.下载内容a{
颜色：白色；
显示：块；
}
.dropDownContent a:悬停{
背景色：#4A96B0；
}
li.dropDownBtn:hover.dropDownContent{
显示：块；
}

溢出：主菜单上隐藏的阻止子菜单显示。我假设您正在使用它来清除导航菜单中的浮动，因此添加了一个

.clearfix

，它使用了一种不同的技术，不使用

溢出：隐藏
，并从菜单的CSS中删除
溢出：隐藏


ul.navBar{
列表样式类型：无；
边际：0px；
填充：0px；
背景色：#4277f4；
光标：指针；
}
李{
浮动：左；
}
李阿{
显示：内联块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
字体系列：Verdana，日内瓦，塔荷马，无衬线；
字体大小：20px；
文字装饰：无；
}
李：悬停{
背景色：#A2AEB3；
}
li.dropDownBtn{
位置：相对位置；
}
.下载内容{
显示：无；
位置：绝对位置；
背景色：#7DC9E3；
宽度：150px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
文字装饰：无；
}
.下载内容a{
颜色：白色；
显示：块；
}
.dropDownContent a:悬停{
背景色：#4A96B0；
}
li.dropDownBtn:hover.dropDownContent{
显示：块；
}
.clearfix:之后{
内容：“；
显示：表格；
明确：两者皆有；
}






溢出：主菜单上隐藏的
阻止子菜单显示。我假设您正在使用它来清除导航菜单中的浮动，因此添加了一个
.clearfix
，它使用了一种不同的技术，不使用
溢出：隐藏
，并从菜单的CSS中删除
溢出：隐藏


ul.navBar{
列表样式类型：无；
边际：0px；
填充：0px；
背景色：#4277f4；
光标：指针；
}
李{
浮动：左；
}
李阿{
显示：内联块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
字体系列：Verdana，日内瓦，塔荷马，无衬线；
字体大小：20px；
文字装饰：无；
}
李：悬停{
背景色：#A2AEB3；
}
li.dropDownBtn{
位置：相对位置；
}
.下载内容{
显示：无；
位置：绝对位置；
背景色：#7DC9E3；
宽度：150px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
文字装饰：无；
}
.下载内容a{
颜色：白色；
显示：块；
}
.dropDownContent a:悬停{
背景色：#4A96B0；
}
li.dropDownBtn:hover.dropDownContent{
显示：块；
}
.clearfix:之后{
内容：“；
显示：表格；
明确：两者皆有；
}






为ul.navBar设置一个高度并取出溢出隐藏

ul.navBar {
    list-style-type: none;
    margin: 0;
    padding:0;
    background-color: #4277f4;
    cursor: pointer;
    height:55px;
}

设置ul.navBar的高度，并取出溢出隐藏

ul.navBar {
    list-style-type: none;
    margin: 0;
    padding:0;
    background-color: #4277f4;
    cursor: pointer;
    height:55px;
}

这是因为您有以下设置：

.dropDownContent {
   display: none;
   position: absolute;
etc.

这意味着默认情况下不显示下拉列表（通常是所需的功能…）

然后你就有了这个规则，当你将鼠标悬停在它的
li
父项上时，它就会显示出来：

li.dropDownBtn:hover .dropDownContent{
  display: block;
}

这就是CSS下拉菜单的工作方式，您不喜欢它的哪些方面？
这是因为您有以下设置：

.dropDownContent {
   display: none;
   position: absolute;
etc.

这意味着默认情况下不显示下拉列表（通常是所需的功能…）

然后你就有了这个规则，当你将鼠标悬停在它的
li
父项上时，它就会显示出来：

li.dropDownBtn:hover .dropDownContent{
  display: block;
}

这就是CSS下拉菜单的工作方式，您不喜欢它的哪些方面？
它可以工作，但有一个小问题：如何确保这个“ul.navBar”的高度刚好足以包含“li”元素？例如，如果它是你提到的“55px”，当它悬停时，它会在每个“li”框下面留下一个小空间，只要调整一下就可以了。尝试使用54px、53px等。。。直到它成为一个新的世界