Html 如何在100%宽度的图层中创建列表菜单？

我有一个列表形式的菜单，我希望菜单分为两行，第一行是第一级，第二行是第二级。我一直在努力解决的问题是，我希望每一行都是100%

这就是我想要的结果，除了一件事-

我不希望菜单的第二行覆盖图像

请帮帮我

<ul class="levelOne">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4
       <ul class="LevelTwo">
           <li>4.1</li>
           <li>4.2</li>
           <li>4.3</li>
       </ul>
   </li>
   <li>5</li>
</ul>

一,
二,
三,
四,

4.1
4.2
4.3


五,

使用第一个UL上的相对位置

*{框大小：边框框}
：根{宽度：100vw；高度：100vh}
.levelOne{宽度：100%}
.Level1、.Level2{
位置：相对位置；
宽度：100%
}
.levelOne li、.LevelTwo li{显示：内联块；列表样式：无；填充：8px 14px；颜色：#0b405c；光标：指针}
一级{
文本对齐：右对齐
}
.levelOne>li:悬停{
颜色：#999；
背景：#ccc
}
.一级李：悬停.二级{
能见度：可见；
不透明度：1
}
.二级{
背景：#ccc；
位置：绝对位置；
最高：100%；
左：0；
文本对齐：左对齐；
可见性：隐藏；
不透明度：0；
边框底部：2个实心#0b405c
}
.leveltwi:hover{color:white}

法斯基特
项目
För Investerare
康塔克塔oss
Om K2A

组织机构
奥赫战略酒店