I made fisheye menu in css. It is expanding to right site, how to make to expand to left side?
<!DOCTYPE>
<html>
<head>
<title>Pure CSS Fish Eye Menu</title>
<style type="text/css">
.expand-up {
height:100%;
width:600px;
text-align:left;
background-color:#000000;
font-size:12px;
}
.expand-up ul {
margin-left:10px;
}
.expand-up ul li {
float:left;
list-style-type:none;
padding-top:5px;
margin-top:25px;
margin-left:5px;
}
.expand-up ul li a {
text-decoration:none;
color:#FFF;
font-family: arial, helvetica, verdana, sans-serif;
}
.expand-up ul li a div {
height:0px;
border:none;
}
.expand-up ul li:hover a div {
margin-top:-17px;
color:#F80;
font-size:30px;
font-weight:bold;
}
.expand-up ul li:hover + li a div {
margin-top:-13px;
font-size:25px;
}
.expand-up ul li:hover + li + li a div {
margin-top:-7px;
font-size:20px;
}
.expand-up ul li:hover + li + li + li a div {
margin-top:-2px;
font-size:16px;
}
-->
</style>
</head>
<body>
<div class="expand-up">
<ul>
<li>
<a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank">
<div>empty</div>
</a>
</li>
<li>
<a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank">
<div>empty</div>
</a>
</li>
<li>
<a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank">
<div>empty</div>
</a>
</li>
<li>
<a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank">
<div>empty</div>
</a>
</li>
<li>
<a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank">
<div>empty</div>
</a>
</li>
<li>
<a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank">
<div>empty</div>
</a>
</li>
<li>
<a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank">
<div>empty</div>
</a>
</li>
<li>
<a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank">
<div>empty</div>
</a>
</li>
<li>
<a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank">
<div>empty</div>
</a>
</li>
<li>
<a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank">
<div>empty</div>
</a>
</li>
<li>
<a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank">
<div>empty</div>
</a>
</li>
<li>
<a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank">
<div>empty</div>
</a>
</li>
<li>
<a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank">
<div>empty</div>
</a>
</li>
<li>
<a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank">
<div>empty</div>
</a>
</li>
<li>
<a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank">
<div>empty</div>
</a>
</li>
<li>
<a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank">
<div>empty</div>
</a>
</li>
<li>
<a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank">
<div>empty</div>
</a>
</li>
<li>
<a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank">
<div>empty</div>
</a>
</li>
<li>
<a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank">
<div>empty</div>
</a>
</li>
<li>
<a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank">
<div>empty</div>
</a>
</li>
<li>
<a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank">
<div>empty</div>
</a>
</li>
<li>
<a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank">
<div>empty</div>
</a>
</li>
<li>
<a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank">
<div>empty</div>
</a>
</li>
<li>
<a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank">
<div>empty</div>
</a>
</li>
<li>
<a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank">
<div>empty</div>
</a>
</li>
<li>
<a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank">
<div>empty</div>
</a>
</li>
<li>
<a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank">
<div>empty</div>
</a>
</li>
<li>
<a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank">
<div>empty</div>
</a>
</li>
<li>
<a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank">
<div>empty</div>
</a>
</li>
<li>
<a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank">
<div>empty</div>
</a>
</li>
</ul>
</div>
</body>
</html>