Html 下拉子菜单未按预期显示

我试图在html导航菜单中创建一个子菜单。菜单正在显示，但显示在菜单列表中，而不是右侧。我已经做了一个问题的截图，如果有人能帮我修改代码，我将不胜感激

您将从屏幕截图中看到，子菜单出现在主菜单中，而不是关闭在所选链接的右侧

我尝试了很多选择，我需要向专家寻求帮助。 非常感谢

菜单{
宽度：100%；
高度：40px；
保证金：0；
填充：0；
背景：#0c323f；
位置：静态；
}
.导航{
列表样式：无；
填充：0；
保证金：0；
背景：rgb（58,58,58）；
字体大小：16px；
}
李先生{
浮动：左；
}
.导航李：悬停{
背景：#1a4655；
}
李：第一个孩子{
-webkit边界半径：5px 5px 0；
边界半径：5px 0 5px；
}
.李娜{
显示：块；
填充：0 20px；
文字装饰：无；
线高：40px；
颜色：#fff；
}
.导航ul{
显示：无；
位置：绝对位置；
列表样式：无；
左边距：-3px；
填充：0；
溢出：隐藏；
}
李国宝先生{
浮动：无；
}
.导航li:悬停>ul{
显示：块；
背景：#1a4655；
/*边框：实心3px#fff*/
边界顶部：0；
-webkit边界半径：0 0 8px 8px；
边界半径：0 0 8px 8px；
-webkit盒阴影：0px 3px 3px 0px rgba（0,0,0,0.25）；
盒子阴影：0px 3px 0px rgba（0,0,0,0.25）；
位置：绝对位置；
}
.导航li:hover>ul li:hover{
-webkit边界半径：0 5px 5px；
边界半径：0 0 5px 5px；
}
.导航李莉a:悬停{
背景：#0c323f；
颜色：白色；
}
李：最后一个孩子a，
.导航ul li:最后一个孩子a:悬停{
-webkit边界半径：0 5px 5px；
边界半径：0 0 5px 5px；
}

使用

顶部：0

和

左侧：100%

到第二级子菜单

堆栈片段

菜单{
宽度：100%；
高度：40px；
保证金：0；
填充：0；
背景：#0c323f；
位置：静态；
}
.导航{
列表样式：无；
填充：0；
保证金：0；
背景：rgb（58,58,58）；
字体大小：16px；
}
李先生{
浮动：左；
}
.导航李：悬停{
背景：#1a4655；
}
李：第一个孩子{
-webkit边界半径：5px 5px 0；
边界半径：5px 0 5px；
}
.李娜{
显示：块；
填充：0 20px；
文字装饰：无；
线高：40px；
颜色：#fff；
}
.导航ul{
显示：无；
位置：绝对位置；
列表样式：无；
左边距：-3px；
填充：0；
}
.导航{
左：100%；
排名：0；
}
李国宝先生{
浮动：无；
}
.导航li:悬停>ul{
显示：块；
背景：#1a4655；
/*边框：实心3px#fff*/
边界顶部：0；
-webkit边界半径：0 0 8px 8px；
边界半径：0 0 8px 8px；
-webkit盒阴影：0px 3px 3px 0px rgba（0,0,0,0.25）；
盒子阴影：0px 3px 0px rgba（0,0,0,0.25）；
位置：绝对位置；
}
.导航li:hover>ul li:hover{
-webkit边界半径：0 5px 5px；
边界半径：0 0 5px 5px；
}
.导航李莉a:悬停{
背景：#0c323f；
颜色：白色；
}
李：最后一个孩子a，
.导航ul li:最后一个孩子a:悬停{
-webkit边界半径：0 5px 5px；
边界半径：0 0 5px 5px；
}

使用

顶部：0

和

左侧：100%

到第二级子菜单

堆栈片段

菜单{
宽度：100%；
高度：40px；
保证金：0；
填充：0；
背景：#0c323f；
位置：静态；
}
.导航{
列表样式：无；
填充：0；
保证金：0；
背景：rgb（58,58,58）；
字体大小：16px；
}
李先生{
浮动：左；
}
.导航李：悬停{
背景：#1a4655；
}
李：第一个孩子{
-webkit边界半径：5px 5px 0；
边界半径：5px 0 5px；
}
.李娜{
显示：块；
填充：0 20px；
文字装饰：无；
线高：40px；
颜色：#fff；
}
.导航ul{
显示：无；
位置：绝对位置；
列表样式：无；
左边距：-3px；
填充：0；
}
.导航{
左：100%；
排名：0；
}
李国宝先生{
浮动：无；
}
.导航li:悬停>ul{
显示：块；
背景：#1a4655；
/*边框：实心3px#fff*/
边界顶部：0；
-webkit边界半径：0 0 8px 8px；
边界半径：0 0 8px 8px；
-webkit盒阴影：0px 3px 3px 0px rgba（0,0,0,0.25）；
盒子阴影：0px 3px 0px rgba（0,0,0,0.25）；
位置：绝对位置；
}
.导航li:hover>ul li:hover{
-webkit边界半径：0 5px 5px；
边界半径：0 0 5px 5px；
}
.导航李莉a:悬停{
背景：#0c323f；
颜色：白色；
}
李：最后一个孩子a，
.导航ul li:最后一个孩子a:悬停{
-webkit边界半径：0 5px 5px；
边界半径：0 0 5px 5px；
}

T