Html 使子菜单项显示在定位为绝对的div上

我正在尝试使用CSS创建垂直菜单。当我将鼠标悬停在子菜单项上时，它的子菜单的一半不会显示。请参见下图：

可能是因为蓝色背景中的div和包含菜单的div都被定位为绝对值。您可以在此处看到代码直播：

你能告诉我如何正确显示子菜单吗？ 提前谢谢

这是我的密码：

#bg{
位置：绝对位置；
宽度：100%；
身高：100%；
排名：0；
左：0；
z指数：0；
溢出：隐藏；
背景色：#437DCC；
}
#抽屉{
z指数：2；
溢出：隐藏；
身高：100%；
宽度：270px！重要；
位置：绝对位置；
溢出：隐藏；
}
#gnavi链接>ul{
列表样式类型：无；
背景：#fff；
}
#gnavi链接>ul>li{
边缘底部：10px；
}
#gnavi链接>ul>li>a{
显示：块；
高度：40px；
线高：40px；
颜色：#1A1A；
字体系列：“Calibre Bold”，无衬线；
字体大小：粗体；
字母间距：0.25em；
文本转换：大写；
}
#gnavi链接>ul>li>ul{
列表样式类型：无；
左边距：-50px；
右边距：5px；
}
#gnavi链接>ul>li>ul>li>a{
字体大小：13px；
显示：块；
填充：5px16px；
颜色：#1A1A；
文字装饰：无；
字母间距：0.20em；
文本转换：大写；
}
#gnavi链接>ul>li>a:悬停{
颜色：19a69a；
}
#gnavi链接>ul>li>ul>LIA:悬停{
背景色：#5A5959；
颜色：#fff；
}
#gnavi链接>保险商实验室>保险商实验室>保险商实验室{
显示：无；
}
#gnavi链接>ul>li>ul>li:悬停ul{
位置：绝对位置；
显示：块；
背景：#999；
左边距：170px；
利润上限：-25px；
}
#gnavi链接>ul>li>ul>li>ul>li{
宽度：150px；
}

菜单项

菜单项

子菜单测试1

子菜单测试2

子菜单测试1
子菜单测试2
子菜单测试3


子菜单测试3


菜单项

删除

溢出：隐藏
在您的
#抽屉上

#drawer {
    z-index: 2;   
    height: 100%;
    width: 270px !important;
    position: absolute;
}

删除
溢出：在
#抽屉上隐藏

#drawer {
    z-index: 2;   
    height: 100%;
    width: 270px !important;
    position: absolute;
}

这是因为
溢出：在您的代码中隐藏了
，删除它，它就会工作：


#bg{
位置：绝对位置；
宽度：100%；
身高：100%；
排名：0；
左：0；
z指数：-1；
背景色：#437DCC；
}
#抽屉{
z指数：2；
身高：100%；
宽度：270px！重要；
位置：绝对位置；
}
#gnavi链接>ul{
列表样式类型：无；
背景：#fff；
}
#gnavi链接>ul>li{
边缘底部：10px；
}
#gnavi链接>ul>li>a{
显示：块；
高度：40px；
线高：40px；
颜色：#1A1A；
字体系列：“Calibre Bold”，无衬线；
字体大小：粗体；
字母间距：0.25em；
文本转换：大写；
}
#gnavi链接>ul>li>ul{
列表样式类型：无；
左边距：-50px；
右边距：5px；
}
#gnavi链接>ul>li>ul>li>a{
字体大小：13px；
显示：块；
填充：5px16px；
颜色：#1A1A；
文字装饰：无；
字母间距：0.20em；
文本转换：大写；
}
#gnavi链接>ul>li>a:悬停{
颜色：19a69a；
}
#gnavi链接>ul>li>ul>LIA:悬停{
背景色：#5A5959；
颜色：#fff；
}
#gnavi链接>保险商实验室>保险商实验室>保险商实验室{
显示：无；
}
#gnavi链接>ul>li>ul>li:悬停ul{
位置：绝对位置；
显示：块；
背景：#999；
左边距：170px；
利润上限：-25px；
}
#gnavi链接>ul>li>ul>li>ul>li{
宽度：150px；
}


菜单项

菜单项

子菜单测试1

子菜单测试2

子菜单测试1
子菜单测试2
子菜单测试3


子菜单测试3


菜单项

这是因为
溢出：在您的代码中隐藏了
，删除它，它就会工作：


#bg{
位置：绝对位置；
宽度：100%；
身高：100%；
排名：0；
左：0；
z指数：-1；
背景色：#437DCC；
}
#抽屉{
z指数：2；
身高：100%；
宽度：270px！重要；
位置：绝对位置；
}
#gnavi链接>ul{
列表样式类型：无；
背景：#fff；
}
#gnavi链接>ul>li{
边缘底部：10px；
}
#gnavi链接>ul>li>a{
显示：块；
高度：40px；
线高：40px；
颜色：#1A1A；
字体系列：“Calibre Bold”，无衬线；
字体大小：粗体；
字母间距：0.25em；
文本转换：大写；
}
#gnavi链接>ul>li>ul{
列表样式类型：无；
左边距：-50px；
右边距：5px；
}
#gnavi链接>ul>li>ul>li>a{
字体大小：13px；
显示：块；
填充：5px16px；
颜色：#1A1A；
文字装饰：无；
字母间距：0.20em；
文本转换：大写；
}
#gnavi链接>ul>li>a:悬停{
颜色：19a69a；
}
#gnavi链接>ul>li>ul>LIA:悬停{
背景色：#5A5959；
颜色：#fff；
}
#gnavi链接>保险商实验室>保险商实验室>保险商实验室{
显示：无；
}
#gnavi链接>ul>li>ul>li:悬停ul{
位置：绝对位置；
显示：块；
背景：#999；
左边距：170px；