I got an idea a few hours ago and to my surprise it worked. So now I'm presenting you a "weird" way to use :hover - but I'm not explaning how or why it works. This ought to be a nice brain hurting session for all the CSS experts that may be around.

Works perfectly with Firefox 1.5, Opera 9 almost gets it right. IE6 displays nothing, Opera 8 is lost, haven't tested Linux and/or Mac browsers. As far as I know it doesn't abuse browser CSS support so any browser with a good rendering engine should get it right.

Besides the HTML file below you need a PNG image, preferably with some transparency, of size 48 x 48 pixels.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<title>Fake :hover position</title>
		<style type="text/css">
* { border : 0; margin : 0; padding : 0; }
body { text-align : center; }
div {
	height : 432px;
	overflow : hidden;
	margin : 0 auto;
	text-align : left;
	width : 96px;
}
ul {
	font : 10pt/48px "Arial", sans-serif;
	list-style : none;
	margin-top : 576px;
	width : 48px;
}
li {
	background : white;
	color : black;
	display : block;
	margin-top : -192px;
	height : 144px;
}
li:hover,li:hover + li + li + li + li {
	background : #EEF;
	border-right : 48px solid white;
	width : 48px;
}
li:hover + li,li:hover + li + li + li {
	background : #DDF;
	border-right : 24px solid white;
	width : 72px;
}
li:hover + li + li {
	background : #CCF;
}
li span {
	background : #BBE;
	color : #FFF;
	cursor : pointer;
	display : block;
	left : -5000px;
	padding : 0 5px;
	position : absolute;
}
li:hover span {
	left : auto;
	margin-left : 48px;
	margin-top : -67px;
}
		</style>
	</head>
	<body>
		<h1>Fake :hover position</h1>
		<div>
		<ul>
			<li><a href="#1"><img alt="" src="testi.png" /><span>One.</span></a></li>
			<li><a href="#2"><img alt="" src="testi.png" /><span>Two.</span></a></li>
			<li><a href="#3"><img alt="" src="testi.png" /><span>Three.</span></a></li>
			<li><a href="#4"><img alt="" src="testi.png" /><span>Four.</span></a></li>
			<li><a href="#5"><img alt="" src="testi.png" /><span>Five.</span></a></li>
			<li><a href="#6"><img alt="" src="testi.png" /><span>Six.</span></a></li>
			<li><a href="#7"><img alt="" src="testi.png" /><span>Seven.</span></a></li>
			<li><a href="#8"><img alt="" src="testi.png" /><span>Eight.</span></a></li>
			<li><a href="#9"><img alt="" src="testi.png" /><span>Nine.</span></a></li>
			<li><a href="#"></a></li>
			<li><a href="#"></a></li>
		</ul>
		</div>
		<p>Supported only by Firefox 1.5; Opera 9 almost gets it.</p>
	</body>
</html>
Have fun!