Блог

Главная - Вопросы по программированию - Как расположить вложенные элементы ul относительно элемента погружения и вне его вместо их родительских элементов

Как расположить вложенные элементы ul относительно элемента погружения и вне его вместо их родительских элементов

#html #css

#HTML #css

Вопрос:

У меня есть элемент DIV, который содержит вложенные многоуровневые элементы UL. Все элементы UL расположены в абсолютном положении, а элемент DIV — в относительном.

Теперь я хочу, чтобы все дочерние элементы UL были расположены относительно элемента DIV, а не к их родительским элементам.

Вот пример кода:

 <div id="menu-container">
<ul>
<li><a href="#">Level 1.1</a>
  <ul>
    <li><a href="#">Level 1.1.1</a>
      <ul>
        <li><a href="#">Level 1.1.1.1</a></li>
        <li><a href="#">Level 1.1.1.2</a></li>
      </ul>
    </li>
    <li><a href="#">Level 1.1.2</a></li>
  </ul>
</li>
<li><a href="#">Level 1.2</a>
  <ul>
    <li><a href="#">Level 1.2.1</a></li>
    <li><a href="#">Level 1.2.2</a>
      <ul>
        <li><a href="#">Level 1.2.2.1</a>
          <ul>
            <li><a href="#">Level 1.2.2.1.1</a></li>
          </ul>
        </li>
        <li><a href="#">Level 1.2.2.2</a></li>
        <li><a href="#">Level 1.2.2.3</a></li>
      </ul>
    </li>
    <li><a href="#">Level 1.2.3</a></li>
  </ul>
</li>
<li><a href="#">Level 1.3</a>
  <ul>
    <li><a href="#">Level 1.3.1</a>
      <ul>
        <li><a href="#">Level 1.3.1.1</a></li>
        <li><a href="#">Level 1.3.1.2</a></li>
      </ul>
    </li>
  </ul>
</li>
<li><a href="#">Level 1.4</a>
  <ul>
    <li><a href="#">Level 1.4.1</a></li>
    <li><a href="#">Level 1.4.2</a></li>
    <li><a href="#">Level 1.4.3</a></li>
    <li><a href="#">Level 1.4.4</a></li>
    <li><a href="#">Level 1.4.5</a></li>
  </ul>
</li>

Комментарии:

1. Не могли бы вы добавить свой текущий CSS? Также, было бы действительно полезно, если бы вы создали тестовый пример jsFiddle .

Ответ №1:

Вы не сможете, поскольку дочерние элементы UL всегда будут искать ближайшего родителя, который имеет какое-либо позиционирование, UL является дочерним по отношению к предыдущему UL, у которого есть позиция.

Интуиция подсказывает мне, что если вы хотите создать меню на ЧИСТОМ CSS (что, на мой взгляд, немного излишне), вы могли бы проверить, есть ли у Стю Николлса что-то, что могло бы вас вдохновить, вы можете проверить его работу по адресу: http://cssplay.co.uk