Html 具有全宽导航栏的导航栏子菜单

我正在尝试实现与下图类似的效果：

但是，我正在努力使子菜单对齐，并使子菜单的宽度与完整导航栏的宽度相同：

正文{
宽度：1000px；
保证金：0自动；
溢出x：隐藏；
}
.项目{
浮动：左；
位置：相对位置；
}
.项目a{
填充：10px；
边框：1px黑色实心；
保证金：1px；
显示：块；
宽度：100px；
}
.项目.所有子项目{
显示：无；
位置：绝对位置；
背景：红色；
宽度：100%；
}
.项目.分项{
浮动：左；
利润率：0.1%；
宽度：30%；
}
.项目：悬停{
背景颜色：绿色；
} 
.item:hover>.all subs{
显示：块；
}

分项清单1
子1
次级2
子3
子4
子5
子6
分项清单2
子1
次级2
分项清单3
子1
次级2
分项清单1
子1
次级2
子3
子4
子5
子6
分项清单2
子1
次级2
分项清单3
子1
次级2
分项清单1
子1
次级2
子3
子4
子5
子6
分项清单2
子1
次级2
分项清单3
子1
次级2
分项清单1
子1
次级2
子3
子4
子5
子6
分项清单2
子1
次级2
分项清单3
子1
次级2
分项清单1
子1
次级2
子3
子4
子5
子6
分项清单2
子1
次级2
分项清单3
子1
次级2
分项清单1
子1
次级2
子3
子4
子5
子6
分项清单2
子1