Javascript HTML/CSS下拉导航菜单未显示

我试图创建一个下拉导航，其中有一个div-box-absolute，它具有

可见性：none

，但我认为当我悬停时，我没有使用正确的元素。有什么帮助吗？我认为问题在于代码的最后一部分。谢谢

.main导航{
背景：#000；
高度：30px；
位置：相对位置；
溢出：可见；
z指数：2；
宽度：100%；
左：0；
游标：默认值；
}
.主导航内部{
身高：100%；
}
.main nav>.internal{
文本对齐：对齐；
}
.nav链接容器{
位置：静态；
/*背景：红色*/
身高：100%；
}
.导航链接{
填充：0 3px；
显示：内联；
边缘底部：20px；
溢出：隐藏；
/*背景颜色：绿色*/
}
李{
垂直对齐：顶部；
填充物：5px；
显示：内联块；
/*背景：蓝色*/
}
李>a{
颜色：#FFF；
字体大小：12px；
字母间距：1px；
文本转换：大写；
填充：10px 9px 9px；
利润率：0-3倍；
}
a:悬停{
背景色：白色；
颜色：#000；
}
.导航二级{
可见性：隐藏；
位置：绝对位置；
顶部：30px；
左：0；
宽度：100%；
高度：自动；
边框底部：5px实心#000；
背景：红色；
文本对齐：左对齐；
}
.导航二级集装箱{
填充顶部：40px；
填充底部：40px；
-ms flex:0px 1px自动；
-webkit-box-flex:0；
-webkit flex:0px 1px自动；
flex:0px 1px自动；
}
li>a:悬停，导航二级{
显示：块；
}

末尾的选择器不正确。您所指定的将选择悬停时锚定标记内具有类“nav-level-2”的所有元素。您需要使用“+”选择器选择紧跟在锚定标记之后的div。并使div可见

要做到这一点，请尝试将末尾的css代码更改为-

li>a:hover + .nav-level-2{
    visibility: visible;
}

编辑：

要在将鼠标指针移动到菜单中时保持菜单打开，需要将悬停选择器指定给container div

我已经更改了css的最后一位，选择了类为“nav whats new”的“li”元素，并在其上使用了悬停选择器来更改“nav-level-2”元素的可见性-

li.nav-whats-new:hover .nav-level-2 {
  visibility: visible;
}

这是最新的小提琴-

---

末端的选择器不正确。您所指定的将选择悬停时锚定标记内具有类“nav-level-2”的所有元素。您需要使用“+”选择器选择紧跟在锚定标记之后的div。并使div可见

要做到这一点，请尝试将末尾的css代码更改为-

li>a:hover + .nav-level-2{
    visibility: visible;
}

编辑：

要在将鼠标指针移动到菜单中时保持菜单打开，需要将悬停选择器指定给container div

我已经更改了css的最后一位，选择了类为“nav whats new”的“li”元素，并在其上使用了悬停选择器来更改“nav-level-2”元素的可见性-

li.nav-whats-new:hover .nav-level-2 {
  visibility: visible;
}

这是最新的小提琴-

---

您需要在悬停时添加

可见性：可见
，并在悬停后添加
+
符号，因为子菜单div位于锚定之外<代码>li>a:hover.nav-level-2
至
li>a:hover+.nav-level-2
<代码>+

引用悬停元素的下一个元素

.main导航{
背景：#000；
高度：30px；
位置：相对位置；
溢出：可见；
z指数：2；
宽度：100%；
左：0；
游标：默认值；
}
.主导航内部{
身高：100%；
}
.main nav>.internal{
文本对齐：对齐；
}
.nav链接容器{
位置：静态；
/*背景：红色*/
身高：100%；
}
.导航链接{
填充：0 3px；
显示：内联；
边缘底部：20px；
溢出：隐藏；
/*背景颜色：绿色*/
}
李{
垂直对齐：顶部；
填充物：5px；
显示：内联块；
/*背景：蓝色*/
}
李>a{
颜色：#FFF；
字体大小：12px；
字母间距：1px；
文本转换：大写；
填充：10px 9px 9px；
利润率：0-3倍；
}
a:悬停{
背景色：白色；
颜色：#000；
}
.导航二级{
可见性：隐藏；
位置：绝对位置；
顶部：30px；
左：0；
宽度：100%；
高度：自动；
边框底部：5px实心#000；
背景：红色；
文本对齐：左对齐；
}
.导航二级集装箱{
填充顶部：40px；
填充底部：40px；
-ms flex:0px 1px自动；
-webkit-box-flex:0；
-webkit flex:0px 1px自动；
flex:0px 1px自动；
}
li>a:悬停+导航2级{
能见度：可见；
}

您需要在悬停时添加

可见性：可见

，并在悬停后添加

+

符号，因为子菜单div位于锚点之外<代码>li>a:hover.nav-level-2至

li>a:hover+.nav-level-2

<代码>+引用悬停元素的下一个元素

.main导航{
背景：#000；
高度：30px；
位置：相对位置；
溢出：可见；
z指数：2；
wid