Why does position:absolute have different effect between DIV and UL/LI?

Question

I am trying to understand the reason why position:absolute has different effect on both codes (NOTE: both codes has identical CSS, but one has DIV, while the other has UL/LI).

HTML code using UL/LI:

<div class="menu-bar">
      <li>
        <a>Item1</a>
        <div class="sub-menu-1">
          <ul>
            <li>
              <a>Item1-2</a>
              <div class="sub-menu-2">
                <ul>
                  <li><a>Item1-2-1</a></li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </li>
    </div>

HTML code using DIV:

<div class="menu-bar">
      <div>
        <a>Item1</a>
        <div class="sub-menu-1">
          <div>
            <a>Item1-2</a>
            <div class="sub-menu-2">
              <a>Item1-2-1</a>
            </div>
          </div>
        </div>
      </div>
    </div>

CSS code for both the HTML code:

.menu-bar {
  background-color: yellow;
}

div.sub-menu-1 {
  background-color: red;
}

div.sub-menu-2 {
  background-color: green;
}

.sub-menu-1 {
  position: absolute;
  display: block;
}

.sub-menu-2 {
  position: absolute;
  display: block;
}

Even thought they have identical CSS, yet their positioning is different. In the code using DIV, the elements are right under each other. In the code using UL/LI, the elements are under each other, but slightly pushed to the right