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

Question

我有一个列表形式的菜单，我希望菜单分为两行，第一行是第一级，第二行是第二级。我一直在争论的问题是我希望每一行都是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>

Answer 1

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

*{box-sizing: border-box}
:root{width: 100vw; height: 100vh}
.levelOne{width: 100%}
.levelOne, .LevelTwo{
  position: relative;
  width: 100%
}
.levelOne li, .LevelTwo li{display: inline-block; list-style: none; padding: 8px 14px;color: #0b405c;cursor: pointer}
.levelOne{
  text-align: right
 }
.levelOne >li:hover{
  color: #999;
  background: #ccc
}
.levelOne li:hover .LevelTwo{
  visibility: visible;
  opacity: 1
}
.LevelTwo{
  background: #ccc;
  position: absolute;
  top:100%;
  left: 0;
  text-align: left;
  visibility: hidden;
  opacity: 0;
  border-bottom: 2px solid #0b405c
}
.LevelTwo li:hover{color: white}

<ul class="levelOne">
   <li>Fastigheter</li>
   <li>Projekt</li>
   <li>För Investerare</li>
   <li>Kontakta oss</li>
   <li>Om K2A
       <ul class="LevelTwo">
           <li>Organisation</li>
           <li>Affäraside Och strategi</li>
       </ul>
   </li>
</ul>