Css 如何使子菜单正确显示

我试图为菜单栏创建一个子菜单，我将子菜单设置为绝对定位，但子菜单的显示不显示在父菜单列表的下方。它显示在所有菜单列表的子菜单的静态位置（相同位置）

但是，当我将所有菜单列表设置为

float:left

时，子菜单可以工作，但我不想为菜单列表设置float:left

---

如何在不改变浮动的情况下使子菜单正确显示：左为菜单列表。

添加

位置：相对至
。菜单栏li

演示链接
更新的JSFIDLE


#菜单按钮{
显示：无；
文本对齐：居中；
}
.菜单栏{
浮动：左；
宽度：100%；
背景色：#00467f；
}
.菜单栏{
文本对齐：居中；
背景色：#00467f；
列表样式类型：无；
}
.菜单栏李{
光标：指针；
显示：内联；
左：1%；
右：1%；
位置：相对位置；
}
.菜单栏李a{
颜色：白色；
文字装饰：无；
}
.活动菜单{
背景色：#4D9C37；
垫面：0.5%；
垫底：0.5%；
边界半径：4px；
}
.菜单栏{
位置：绝对；/*******如果此位置是相对位置，则菜单将折叠*******/
顶部：15px；
左：0px；
边框：1px实心#e7e7e7；
显示：无；
背景：#fff；
}
.菜单栏{
颜色：银色；
}
.菜单栏li：悬停ol{
显示：块；
}
















请（始终）在此处包含代码的相关部分。您只需从中获取所需内容：您能告诉我为什么给出了left:0px，子菜单列表的left:0px的默认值是什么，为什么需要这样做吗？我们告诉浏览器我们想要内部（
绝对值）
）要相对于外部（
相对
）元素放置的元素。这是使用四个可能的属性来完成的：
top、bottom、left
和
right
。使用两个属性就足够了。默认情况下，内部元素从外部元素的左上角开始。