Как сделать строка увеличивалась при наведени мышки?

Question

[Victorius13]

Почему строка не расширяется и один текст накладывается на другой?
Html:

<ul>
<li>Yz<p class="overlay">Элемент</p></li>
<li>Yz<p class="overlay">Элемент</p></li>
<li>Yz<p class="overlay">Элемент</p></li>
</ul>

Css:

.overlay{
  display:none;
  position: absolute;
}
ul li:hover .overlay{
 display: inline;
}
ul li{
	display: inline;
}

Как сделать чтобы строка удлиннялась, а не один текст накладывался на дургой?

Answer 1

[moow]

position: absolute; убрать нужно

Answer 2

[lemonlimelike]

Просто убери position absolute