<br /> makes another <li>'s go out of lane - html

Question

This is what happens with another <li> when I use <br /> in one of them:
With <br />:
Without <br />:
I don't really know if I should use ul,li here. It would be nice if you told me.
My code:
html
<div class="menu">
<ul>
<li><p>Text</p></li>
<li><p>Text</p></li>
<li><p>Text</p></li>
<li><p>Text</p></li>
<li><p>Text in two lines</p></li>
</ul>
</div>
css
.menu{
height: 96px;
text-align: center;
}
.menu ul{
list-style-type: none;
}
.menu li{
display: inline-block;
height: 96px;
width: 96px;
margin-left: 10px;
background-image: url("../images/menu-button.png");
}
.menu li:hover{
background-image: url("../images/menu-button-hover.png");
}
.menu p{
top:40px;
position:relative;
}
.menu a{
text-decoration: none;
color: black;
}
.menu a:hover{
text-decoration: none;
color: black;
}
Thanks in advance, waiting for a help!

Answer 1

Still same problem when I use <br />. Another buttons gets pushed
down.
Where you have display: inline-block, you also need vertical-align: top.
(The default is vertical-align: baseline.)

Answer 2

Just as Diodeus said, your markup is invalid. It should look something like this:
HTML:
<div class="menu">
<ul>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text in two lines</li>
</ul>
</div>
While you can have a paragraph tag in there, since you only have just a small amount of text, it's really kid of overkill (unless you need the extra hook for styling or something).
JSFiddle