Html 超级下拉菜单位置问题

我正在尝试创建一个超级下拉菜单，就像下面链接中的菜单一样：

我制作了这把小提琴，但由于第二个ul的定位和边界不好，事情进展不顺利：(

简单的

主菜单


二级1


LastLevelX


最后一级




第二级2


末级


末级


末级






#firstUl{高度：42px；位置：相对；背景：#ccc；}
#firstUl li{浮动：左；边框：1px实心#fff；填充：10px；边框：1px实心红色；}
#第二个{显示：无；背景：#fafafa；}
#二级李{
浮动：左；
显示：块；
边框：1px实心#eaeaea；
}
#末级{
显示：无；
}
#李：悬停>#李二{
边框：1px纯红；
显示：块；
位置：绝对位置；
最高：100%；
}
#第一级李#第二级李：悬停>#最后一级{
显示：块；
位置：绝对位置；
最高：100%；
左：0；
}
#第一级李#第二级李#最后一级李{
浮动：无；
}

有人能帮我解决这个问题吗？

试着将#secondUl li设置为position:relative，以便孩子的位置取决于它：

#secondUl li {
    ...
    position: relative;
}

尝试将#secondUl li设置为position:relative，以便孩子的（UL）位置取决于它：

#secondUl li {
    ...
    position: relative;
}

---

首先，不要使用几个ID相同的元素（“lastLevel”）！首先，不要使用几个ID相同的元素（“lastLevel”）！