Раскрывающееся меню, абсолютное и относительное

Question

Im учит CSS, поэтому я начал создавать выпадающее меню, и у меня есть вопрос. Вот структура моего нав:

<nav> 
    <ul> 
    <li>style 1 
     <ul class="sub-menu menu-1"> 
     <li>uno</li> 
     <li>dos</li> 
     <li>tres</li>  
     </ul> 
    </li> 
    <li>style 2 
     <ul class="sub-menu menu-2"> 
     <li>uno</li> 
     <li>dos</li> 
     <li>tres</li> 
     </ul> 
    </li> 
    <li>style 3 </li> 
    <li>style 4 </li> 
    </ul> 
</nav> 

Мой вопрос: почему должен каждый li из подменю позиционироваться абсолютна, в то время как его родитель должен быть относительным для того, чтобы подменю падать вниз? Если я игнорирую, что я получаю следующее (он падает вниз всю область нав, а не только подменю):

Но если установить родительский SubMenu в положение относительны, и установите положение в подменю как абсолютное, он работает:

Я хочу понять, почему это происходит, как абсолютные и относительные позиции работают, чтобы заставить его работать. Благодаря!

Answer 1

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