Позициониране

[Avicci]

Здравейте ,уча се да работя с CSS и в момента си правя меню за сайта.

Нещата около позиционирането не са ми много ясни(position:relative ,absolute)

От уроци разбрах как се прави меню и разбрах голяма част от кода,но едно нещо така и не ми се изясни.

Ето го кода на html-а.

<body>
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a>
  <ul>
                 <li><a href="#">News</a></li>
                 <li><a href="#">Videos</a></li>
                 <li><a href="#">Wallpapers</a></li>
                 <li><a href="#">Portfolio</a></li>
                
  </ul>
  </li>
  <li><a href="#">Contact</a></li>
</ul>
</body>

Това е кода за css

* { padding:0; margin:0; }
   body { padding:100px; font-family:Georgia, "Times New Roman", Times, serif; }
   ul { list-style:none; }
   ul li { float:left; padding-right:1px; position:relative;  }
   ul a { display:table-cell; vertical-align:middle; width:100px; height:50px; text-align:center; background:#69C; color:#FFF; text-decoration:none; }
   ul a:hover { background:#900 }
   li > ul { display:none; position:absolute; left:0; top:100%;  }
   li:hover > ul { display:block;  }
   li > ul li { padding:0; padding-top:1px; }

Нещото което не мога да разбера е в ето тези два реда.

ul li { float:left; padding-right:1px; position:relative; }
li > ul { display:none; position:absolute; left:0; top:100%; }

така написано ми обръща субменюто (News,videos,wallpapers,portfolio) вертикално и го лепва за главното меню,точно както искам,но всяка различна позиция например ако дам вместо

li > ul { display:none; position:absolute; left:0; top:100%; }

позицията да е relative субменюто ми седи хоризонтално.

Не мога да разбера защо се получава този ефект с обръщането на менюто,ясно ми е,че субменюто се позиционира спрямо елемнта родител,но не мога да разбера защо се обръща вертикално.Какво пропускам?