Hi!

I have a Rollover Menu with 4 Images and all of them are vertically.
I want to make my menu to have two columns like below.

_______________________________
| 1 | 2 |
|____________ _|________________|
| 3 | 4 |
|_____________ |________________|

HTML

Code:
<div id="leftnav">
<ul>
         <li class="1"><a href="right.htm"><span>car</span></a></li>
         <li class="2"><a href="wrong.htm"><span>tree</span></a></li>
         <li class="3"><a href="wrong.htm"><span>apple</span></a></li>
         <li class="4"><a href="wrong.htm"><span>cow</span></a></li>
</ul>
</div>
CSS

Code:
#leftnav ul { width:200px; }
#leftnav li a { height:40px; display:block; }

#leftnav li.1 { background-image:url(1.jpg); }
#leftnav li.1 a { background-image:url(1selected.jpg); }
#leftnav li.2 { background-image:url(2.jpg); }
#leftnav li.2 a { background-image:url(2selected.jpg); }
#leftnav li.3 { background-image:url(3.jpg); }
#leftnav li.3 a { background-image:url(3selected.jpg); }
#leftnav li.4 { background-image:url(4.jpg); }
#leftnav li.4 a { background-image:url(4selected.jpg); }

#leftnav li a:hover { background-image:none; }
#leftnav li a span { display:none; } }
Please help me to modify the code above to make Rollover Menu with Images per two columns.

Thank you!