全幅css下拉菜单

我正试图创建一个纯粹而简单的CSS下拉菜单，它将在每个项目下以全幅模式打开，但也将保持每个下拉菜单在其父项目下。 这张图片更好地解释了我想要实现的目标：

我只是不知道如何将嵌套的UL保存在每个li中，但也有一个全宽的背景来包装它

这是我在Codepan上准备的一个演示：

/*不太相关的样式*/
h1{字体大小：20px；填充顶部：20px；}
.container{位置：相对；边距：20px自动0自动；宽度：75%；}
.header{background:#eee；}
.nav{背景：#ccc；}
/*相关样式*/
body{overflow-x:hidden；}/*来自css技巧注释的技巧*/
/*一级*/
.nav>ul>li{
显示：内联块；
位置：相对位置；
填充：3px10px 3px0；
z指数：100；
}
/*二级*/
.nav>ul>li>ul{
位置：绝对位置；
左：0；
最高：100%；
填充：0 1000em；/*来自css技巧注释的技巧*/
边距：0-1000em；/*来自css技巧注释的技巧*/
z指数：101；
可见性：隐藏；
不透明度：0；
背景：rgba（255,240,240,0.8）；
}
.nav>ul>li:悬停>ul{
能见度：可见；
不透明度：1；
}
.nav>ul>li>ul>li{
填充：3px0；
}
.nav>ul>li:悬停。放下{
字体大小：粗体；
}

汉克的大Leauge小部件
你想要一个小部件吗？我们找到他们了！























各种各样的内容

各种各样的内容

各种各样的内容

各种各样的内容

各种各样的内容

各种各样的内容

**CSS和HTML**

你尝试过什么吗？只是基本的UL-LI+UL-LI-UL-hirarchy，效果很好，但我不知道如何用全宽背景来包装它。我将尝试创建codepan或其他东西hi@Johnツ. 谢谢你的帮助，但是请注意，当你将鼠标悬停在Test2上时，会在contact下打开下拉菜单请检查你将制作自定义CSS样式，这只是基本菜单。回答得很好！我认为唯一缺少的是“悬停”效果，请参见上图中的最后一步。可能吗？非常感谢@gilhamer更新了我的答案。这是让下拉列表在线的一种方式吗？