1

I'm learning CSS, so I began creating a dropdown menu and I have a question. Here is the structure of my nav:

<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>

Why must each li from the submenus be positioned absolute, while its parent must be relative in order for the submenu to drop down? If I ignore that I get the following (it drops down the whole area of nav, not just the submenu): Dropdowns the whole area of nav

But if I set submenu's parent a position of relative, and set the submenu's position as absolute, it works: It works

I want to understand why this happens, how the absolute and relative positions work altogether to make it work.

Community
  • 1
  • 1
Joel Alvarez Myrrie
  • 396
  • 7
  • 19
  • Possible duplicate of [Difference between relative and absolute](http://stackoverflow.com/questions/6997895/difference-between-relative-and-absolute) – pol Dec 30 '16 at 02:19
  • I just wanna know why not using relative and absolute drops down the whole nav while using it just drops down the submenu. – Joel Alvarez Myrrie Dec 30 '16 at 02:27

1 Answers1

0

An absolute element is positioned relative to the nearest positioned parent / ancestor. If an absolutely-positioned element has no positioned parent, it uses the document body as reference.