Now I correctly understand what you want to achieve, you need to wrap your images inside elements, and give that parent a fixed height. Then you can add z-index
to your images to ensure the correct image appears ontop. Check the demo below, I have changed your HTML slightly to demonstrate the principle.
HTML
<ul>
<li><a href="index.html"><img src="http://s21.postimg.org/hzb9gge93/hp_homebutton.png" alt="Home" /></a></li>
<li><a href="#"><img src="http://s21.postimg.org/bbentuuqv/hp_monthsbutton.png" alt="Months" onmouseover="this.src='http://s21.postimg.org/8ssyt690n/hp_months.png'" onmouseout="this.src='http://s21.postimg.org/bbentuuqv/hp_monthsbutton.png'" class="months" /></li>
<li><a href="#"><img src="http://s21.postimg.org/rer4tnw9z/hp_forumbutton.png" alt="Forum" /></li>
<li><a href="#"><img src="http://s21.postimg.org/ig12gmrdz/hp_newsbutton.png" alt="News" /></li>
</ul>
CSS
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
clear: both;
height: 54px;
}
ul li img {
position: relative;
z-index: 1;
}
ul li .months {
z-index: 2;
}