Почему при hover двигается весь список?

Question

[lemonlimelike]

.list_name:hover{
	transition: 0.5s;
	font-size: 17px;

}

<div id="sidebar">
	<div class="menu_sidebar">
			<?php foreach($category as $cat): ?>
				<ul>
					<li class="list_sidebar"><a href="#"><p class="list_name"><?php echo $cat['nameCategory'];?></p></a></li>
				</ul>
			<?php endforeach ?>
	</div>
</div>

При наведение на один из элемента списка, двигается весь список? как сделать чтоб двигался только тот элемент на который навел

Answer 1

[pashted]

.list_name {
  height: 20px;
  margin: 15px 0;
}

Answer 2

[Максим Тимофеев]

увеличился шрифт, увеличился родитель, увеличился элемент, сдвинулись релятивные соседи. Все правильно. Хотите решить - задайте фиксированную высоту, родителю текста.