Позиция CSS абсолютная и ширина родительского контейнера в процентах

Я пытаюсь создать раскрывающееся меню HTML/CSS, которое является гибким по ширине. Из-за position:absolute для второго уровня навигации я не получаю ширину первого уровня. Удаление позиции: абсолютное будет перемещать все следующие элементы при наведении...

Как я могу это решить?

Вот код:

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.level_1 > li {
  float: left;
  width: 45%;
  background-color: #2FA4CF;
  margin-right: 6px;
}

.level_1 > li:hover ul {
  display: block;
}

.level_2 {
  display: none;
  position: absolute;
  width: 45%;
}

.level_2 li {
  background-color: #535B68;
}

<ul class="level_1">
  <li>
    <a href="#">Level one (1)</a>
    <ul class="level_2">
      <li><a href="#">Level two (1)</a></li>
    </ul>
  </li>
  <li><a href="#">Level one (2)</a></li>
</ul>

<p>Paragraph</p>

Ответы

Ответ 1

Вы забыли два элемента для отображения на 100%.

Коррекция здесь

1-й элемент забывает об этом: Позиция относительная на уровне_1 > li

.level_1 > li {
    float: left;
    width: 45%;
    background-color: #2FA4CF;
    margin-right: 6px;
    **position:relative;**
}

2-й элемент исправляет его: изменить размер 2-го li

.level_2 {
    display: none;
    position: absolute;
    width: 100%;
}

С "width:100%" на .level_2 он автоматически поворачивается с шириной родительского

Ответ 2

Добавить position:relative в level_1 > li

.level_1 > li {
    float: left;
    width: 45%;
    background-color: #2FA4CF;
    margin-right: 6px;
    position:relative;
}

Ответ 3

Попробуйте установить свойство body { width:100%;}, оно устранит эту проблему, как показано ниже (добавляется в исходный CSS):

body{ width:100%;}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.level_1 > li {
    float: left;
    width: 45%;
    background-color: #2FA4CF;
    margin-right: 6px;
}
.level_1 > li:hover ul {
    display: block;
}
.level_2 {
    display: none;
    position: absolute;
    width: 45%;
}

.level_2 li {
    background-color: #535B68;
}

Ответ 4

Эй, у тебя есть запас 6px в вашей первой строке li, поэтому его немного больше. Я бы использовал запас слева, а не правый. Это должно исправить интервал.