如何创建出现在css悬停上的绝对定位子菜单

我有一个菜单，需要展开以显示悬停时的子元素。根据设计，扩展的子ul需要在页面的整个宽度上扩展，因此需要绝对定位，以便从父li的宽度中分离出来

问题是我需要孩子ul在你悬停在上面时保持可见。因为它是绝对定位的，它不再包含在父li中，所以一旦我的鼠标离开，它就会消失

如果我将父li更改为position:relative，则当鼠标移动到ul上时，ul仍然可见，但子ul不再占据页面的100%宽度

这里有一把小提琴来演示：

以下是缩写标记（上面fiddle链接上的完整代码）：

---

如果子菜单的宽度为页面的100%，但顶层菜单的宽度不是100%，那么我们仍然可以相对于父菜单而不是相对于

li

定位子菜单

.priority-nav >.menu {
  position: relative;
}

但是我们使用视口单位将子菜单的大小调整为页面的宽度

.priority-nav ul li ul {
  display: none;
  position: absolute;
  top:100%;
  left: 0;
  background-color: red;
  width: 100vw;

}

*{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
保证金：0；
填充：0；
}
.cf：之前，
.cf：之后{
内容：“；
显示：表格；
/*clearfix*/
}
.cf：之后{
明确：两者皆有；
}
.优先导航{
位置：相对位置；
宽度：70%；
}
.优先导航>.菜单{
背景：#c0ffee；
}
.优先导航ul li{
浮动：左；
填充：0 10px；
列表样式类型：无；
填充：10px；
}
.优先导航{
显示：无；
位置：绝对位置；
最高：100%；
左：0；
背景色：红色；
宽度：100vw；
}
.优先导航ul li：悬停ul{
显示：块；
}

如果子菜单是页面的100%宽度，但顶层菜单不是，那么我们仍然可以相对于父菜单定位子菜单，而不是相对于

li

.priority-nav >.menu {
  position: relative;
}

但是我们使用视口单位将子菜单的大小调整为页面的宽度

.priority-nav ul li ul {
  display: none;
  position: absolute;
  top:100%;
  left: 0;
  background-color: red;
  width: 100vw;

}

*{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
保证金：0；
填充：0；
}
.cf：之前，
.cf：之后{
内容：“；
显示：表格；
/*clearfix*/
}
.cf：之后{
明确：两者皆有；
}
.优先导航{
位置：相对位置；
宽度：70%；
}
.优先导航>.菜单{
背景：#c0ffee；
}
.优先导航ul li{
浮动：左；
填充：0 10px；
列表样式类型：无；
填充：10px；
}
.优先导航{
显示：无；
位置：绝对位置；
最高：100%；
左：0；
背景色：红色；
宽度：100vw；
}
.优先导航ul li：悬停ul{
显示：块；
}

当您悬停子菜单时，菜单已经保持打开状态，问题是当鼠标向下移动到子菜单时，它会离开悬停的li元素，为了避免这种情况，请确保当鼠标进入子菜单时，它不会离开您悬停的主li，子菜单位于li项中，所以盘旋它被认为是盘旋在主里

您只需在进入子菜单之前避免离开主li，我在您的示例中使用了一些填充：

。优先导航ul li{
//如果未注释，ul将在以下情况下保持可见：
//鼠标在上面，但ul不会100%填充页面
//位置：相对位置；
浮动：左；
填充：0 10px 5px；
列表样式类型：无；
}
.优先导航{
显示：无；
位置：绝对位置；
顶部：35px；
左：0；
背景色：红色；
宽度：100%；
帕