html - Mouseover image pulls other images down -

i'm having problem images of website i'm making. i've been trying different ways solve , best found far. still, it's not need. have 8 buttons , need second 1 replaced bigger image. thing is, pulls others down, , wanted on them. there way it? did in coding:

<a href="index.html"> <input type="image" src="hp-homebutton.png" alt="submit" style="position: relative;" value="home button"/> </a> <p> <img src="hp-monthsbutton.png" onmouseover="this.src='hp-months.png'" onmouseout="this.src='hp-monthsbutton.png'" style="position: relative;"/> <p> <img src="hp-forumbutton.png" style="position: relative;"/> <p> <img src="hp-newsbutton.png" style="position: relative;"/> <p> <img src="hp-contactbutton.png" style="position: relative;"/> <p> <input type="image" src="hp-eventsbutton.png" alt="submit" style="position: relative;" value="events button" onclick="showimage();"/> <p> <img src="hp-gallerybutton.png" style="position: relative;"/> <p> <img src="hp-extrasbutton.png" style="position: relative;"/> <p> 

now correctly understand want achieve, need wrap images inside elements, , give parent fixed height. can add z-index images ensure correct image appears ontop. check demo below, have changed html demonstrate principle.

jsfiddle demo

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; }