急，请教ul中li如何置于顶层遮住下一个li？附图解释，请大家帮忙

为了更形象的说明问题，我干脆画了个图，一目了然。

代码部分：
<ul>
<li><img src="a.jpg"><p>隐藏说明</p></li>
...
</ul>
当li:hover时候p{display:block}
出现图中的状况，请大家帮忙解决一下。谢谢

鼠标经过后li的position:relative;