如何将水平mac样式停靠菜单更改为垂直方向？

Question

我有这个jQuery插件，像这样水平显示mac样式停靠： Demo here

我尝试更改它的css，使其在页面左侧垂直，但似乎有一些问题。

有人可以帮我吗？

我的HTML：

<div class="dock" id="dock2">
<div class="dock-container2"><nav id="main-nav">

 <li> <a class="dock-item2" href="#"><span>Quotes</span><img src="images/quote-icon.png" alt="home" /></a> </li>
 <li> <a class="dock-item2" href="#"><span>Jokes</span><img src="images/joke.png"          alt="contact" /></a> </li>
  <a class="dock-item2" href="#"><span>Facts</span><img src="images/fact.png" alt="portfolio" /></a> 
  <a class="dock-item2" href="#"><span>Health</span><img src="images/heart3.png"             alt="portfolio" /></a> 

 </nav>
</div>
</div>

CSS：

#dock2 {
width: 100%;
bottom: 10px;
position: absolute;
left: -500px;


}
.dock-container2 {
position: absolute;
height: 15px;
background: url(images/dock-bg.gif);
padding-left: 20px;

}
a.dock-item2 {
display: block; 
font: bold 30px Goudy Stout, Goudy Stout, Goudy Stout;
width: 60px; 
color: #000; 
bottom: 0px; 
position: absolute;
text-align: center;
text-decoration: none;
}
.dock-item2 span {
display: none;
padding-left: 20px;

}
.dock-item2 img {
border: none; 
margin: 5px 10px 0px; 
width: 100%; 
}

#zoom
{
position:absolute;
top:200px;

}
#zoom span {
font-size: 18px;
line-height: 25px;
display: block;
transition: font-size .2s;
-moz-transition: font-size .2s;
-webkit-transition: font-size .2s;
}

#zoom span:hover {
font-size: 50px;
}

jQuery的：

 <script type="text/javascript">

$(document).ready(
    function()
    {
        $('#dock2').Fisheye(
            {
                maxWidth: 80,
                items: 'a',
                itemsText: 'span',
                container: '.dock-container2',
                itemWidth: 70,
                proximity: 150,
                alignment : 'right',
                valign: 'bottom',
                halign : 'center'
            }
        )
    }

);

</script>