Css 下拉菜单：子菜单名称位于菜单栏下方，不在导航框内

我编写了一个css下拉菜单，当我将鼠标悬停在“插图”这个词上时，似乎无法让名称“LOGOS”停留在绿色框中。我做了一个单词5em，这样我就能看到它了。无法让它留在盒子里…无法控制它的位置。你能帮忙吗？ 谢谢 T

/*启动小导航条**************************/
#导航条sm cont{位置：绝对；
宽度：1000px；
高度：100px；
}
#sm导航{位置：相对；
顶部：30px；
左：35px；
字体大小：.6em；
线高：250%；
字母间距：0.3em；
列表样式类型：无；
浮动：左；
}
#sm导航a:链接{文本装饰：无；
颜色：银色；
背景色：透明；
填充物：5px 5px；
}
#sm导航a:已访问{文本装饰：无；
颜色：#9781B7；
填充物：5px 5px；
背景色：透明；
}
#sm导航a:悬停{文本装饰：无；
颜色：#fff；
背景色：#a7d6d5；
填充物：5px 5px；
}
#sm nav a:活动{文本装饰：无；
颜色：#fff；
背景颜色：绿色；
填充物：5px 5px；
}
/*开始下拉列表************************************/
#sm nav li ul{位置：相对位置；
列表样式类型：无；
显示：无；
}
#sm nav li：悬停ul{位置：绝对；
背景：绿色；
填充物：5px 5px；
显示：块；
字号：5em；
宽度：103px；
高度：10px；
}
/*末端下拉列表*****************************************/
/*末端小导航条*****************************/

问题在于，您的

li

CSS同时影响父

li

和子

。要解决此问题，只需更改：

#sm-nav li {

到

现在CSS只会影响父级
li
，您可以随意调整子级的CSS，如您所愿：

#sm-nav li:hover ul li { }

您可以添加CSS吗？
#sm-nav > li {

#sm-nav li:hover ul li { }