Фон меню

[glarks]

Здравствуйте, учусь верстке.
Хочу сделать при наведении на ссылку меню, фоновое изображение.
Сделал коряво и все смещается, так как не очень разбираюсь в свойствах - display, position.
Прошу помочь и по возможности ввести в курс дела! 
 

Код:

#menu {
text-align: center;
	text-decoration: none;
		font-weight: bold;
margin-left: 100px;
}
#menu ul{


}

#menu ul li{
float: left;
margin-right: 106px;
margin-top: 40px;

}

#menu ul li a{
	color: #6b4848;
text-align: center;
display: block;

}

.activ, #menu ul li a:hover{
	background: url(../images/menu1.png);
	width: 150px;
	height: 30px;

background-position: center;
}

	<div id="menu">
<ul>
<li><a class="activ" href="#">HOME.</a></li>
<li><a  href="#">PORTFOLIO.</a></li>
<li><a  href="#">WHAT I DO.</a></li>
<li><a  href="#">CONTACT ME.</a></li>
</ul>
		</div>

 

Edited April 5, 2017 by glarks

[Q4Dizzy]

https://jsfiddle.net/od9uy0eg/

 

У вас всё ломается, потому что вы меняете ширину или высоту ссылок при наведении..  При отображении фоновой картинки, элемент обычно неподвижен.

Чтобы бы не было переходов на новую строку, можно задать минимальную ширину для меню, которая больше, чем вся ширина ссылок + их отступов.. 

В вашем случае нужно читать про display; Position вам понадобится, когда будете делать выпадающее меню.