html list hover moves other items - html

Question

I am making a Menu page and i want it to look like this. (I've set a default img for all items for now).
Pizza
pizza1 pizza2 pizza3
imgPizza1 imgPizza2 imgPizza3
Salad
etc
I am using next code:
<div id="MainContent_panelItems">
<br></br><br></br><br></br>
<p class="menuTitle">Pizza</p>
<hr>
</hr>
<ul class="foodItems">
<li style="height:100px;width:200px;">
<p>Pizza Diavola</p>
<img align="center" src="Images/orderedList1.png"></img>
</li>
<li style="height:100px;width:200px;">
<p>Pizza Quattro Formaggi</p>
<img align="center" src="Images/orderedList1.png"></img>
</li>
<li style="height:100px;width:200px;">
<p>Pizza1RoPizza1RoPizza1Ro</p>
<img align="center" src="Images/orderedList1.png"></img>
</li>
<li style="height:100px;width:200px;">
<p>Pizza2RoPizza2RoPizza2Ro</p>
<img align="center" src="Images/orderedList1.png"></img>
</li>
<li style="height:100px;width:200px;">
<p>Pizza3RoPizza3RoPizza3Ro</p>
<img align="center" src="Images/orderedList1.png"></img>
</li>
<li style="height:100px;width:200px;">
<p>Pizza4RoPizza4RoPizza4Ro</p>
<img align="center" src="Images/orderedList1.png"></img>
</li>
<li style="height:100px;width:200px;">
<p>Pizza5RoPizza5Ro</p>
<img align="center" src="Images/orderedList1.png"></img>
</li>
<li style="height:100px;width:200px;">
<p>Pizza6RoPizza6RoPizza6Ro</p>
<img align="center" src="Images/orderedList1.png"></img>
</li>
<li style="height:100px;width:200px;">
<p>Pizza7RoPizza7RoPizza7Ro</p>
<img align="center" src="Images/orderedList1.png"></img>
</li>
</ul>
<br></br><br></br><br></br>
<p class="menuTitle">Paste</p>
<hr>
</hr>
<ul class="foodItems">
<li style="height:100px;width:200px;">
<p>Spaghete Carbonara</p>
<img align="center" src="Images/orderedList1.png"></img>
</li>
</ul>
<br></br><br></br><br></br>
<p class="menuTitle">Salate</p>
<hr>
</hr>
<ul class="foodItems">
<li style="height:100px;width:200px;">
<p>Salată Caesar</p>
<img align="center" src="Images/orderedList1.png"></img>
</li>
</ul>
<br></br><br></br><br></br>
<p class="menuTitle">Băuturi</p>
<hr>
</hr>
<ul class="foodItems">
<li style="height:100px;width:200px;">
<p>Coca-Cola 0.5l</p>
<img align="center" src="Images/orderedList1.png"></img>
</li>
</ul>
</div>
CSS:
.foodItems li
{
display: inline;
float: left;
padding: 10px;
}
.foodItems li:hover
{
border-style:solid;
border-color: #333;
border-width: 1px;
}
p.menuTitle {
font-weight: bold;
}
it looks like this:
My problem is with the lines position and menuTitles and also when i hover over an item, the others move such in following picture:
LE:

Answer 1

The problem here is, border is set only on :hover, so the overall width gets affected and the whole layout gets messed up. What you need to do is, set the border-width to 1px in the normal state as well.
.foodItems li {
display: inline;
float: left;
padding: 10px;
border: 1px solid transparent;
}