html - cssでレイヤーを使用し、画像をメニューの前面に表示するアプローチ

Question

みたいなメニューがあります

しかし、このような結果を得たい

これまでのところ、私はこれを持っています：

<div id="bottomnav">
    <ul>
        <li>

<a  href="#" target="_blank" title="lamp">
    <img class="swing" src="http://site.cheetos.com.br/static/masterbrand/img/cap1-poste.png" width=250 height=350 style="z-index: 10"  /> 
</a>            


        </li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    </div>

z-index を追加しましたが、やり方が間違っています。メニューの上に画像を配置するにはどうすればよいですか? フィドルを見てください